加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
newsinfo.html 10.83 KB
一键复制 编辑 原始数据 按行查看 历史
NO25dav 提交于 2019-04-09 16:56 . 4.09完成页面基本制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=yes"/>
<title>新闻详情</title>
<!--引入mui的css-->
<link rel="stylesheet" href="lib/mui/css/mui.min.css">
<!--引入mui字体-->
<link rel="stylesheet" href="lib/mui/css/icons-extra.css">
<!--引入公共css-->
<link rel="stylesheet" href="css/base.css">
<!--引入本页面的css-->
<link rel="stylesheet" href="css/news.css">
<!--引入公共的侧边栏顶部和底部样式-->
<link rel="stylesheet" href="css/commontab.css">
<!--引入animation-->
<link rel="stylesheet" href="lib/wow/animate.css">
<!--引入swiper的css-->
<link rel="stylesheet" href="lib/swiper/swiper.min.css">
<!--进度条-->
<link rel="stylesheet" href="lib/pace/pace.css">
<script src="lib/pace/pace.min.js"></script>
<!--引入rem-->
<script src="js/rem.js"></script>
<!--引入wow.js-->
<script src="lib/wow/wow.min.js"></script>
</head>
<body>
<div class="layout clearfix">
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-slide-in">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-right" id="my-pop">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view tab-nav">
<li class="mui-table-view-cell mui-collapse small-item">
<a class="mui-navigate-right" href="#">蜀帅首页</a>
<div class="mui-collapse-content small-item-con">
<a href="/" class="">返回首页</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse small-item">
<a class="mui-navigate-right" href="#">关于我们</a>
<div class="mui-collapse-content small-item-con">
<a href="/company.html">企业介绍</a>
<a href="/brand.html">品牌介绍</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse small-item">
<a class="mui-navigate-right">产品系列</a>
<div class="mui-collapse-content small-item-con">
<a href="/product.html">产品展示</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse mui-collapse small-item mui-active">
<a class="mui-navigate-right" href="#">新闻中心</a>
<div class="mui-collapse-content small-item-con">
<a href="/news.html" class="tab-active">新闻资讯</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse small-item">
<a class="mui-navigate-right" href="#">招商加盟</a>
<div class="mui-collapse-content small-item-con">
<a href="/cost.html">加盟费用</a>
<a href="/process.html">加盟流程</a>
<a href="/support.html">加盟支持</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse small-item">
<a class="mui-navigate-right" href="#">联系我们</a>
<div class="mui-collapse-content small-item-con">
<a href="/contact.html">联系我们</a>
</div>
</li>
</ul>
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav my-header-nav">
<a id="offCanvasBtn" href="#my-pop"
class="mui-icon mui-action-menu mui-icon-bars mui-pull-right iconfont my-header-menu">&#xe61e;</a>
<h1 class="mui-title">
<a href="javascript:void(0)">
<img src="img/home/header_img.png" alt="">
</a>
</h1>
</header>
<!-- 主界面具体展示内容 -->
<div class="mui-content mui-scroll-wrapper my-content">
<div class="mui-scroll my-scroll">
<!--轮播图-->
<div class="swiper-container my-banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="img/home/banner_01.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/home/banner_02.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/home/banner_01.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="img/home/banner_02.png" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<!--面包屑导航-->
<div class="bread">
<ul class="bread-nav clearfix container">
<li>
<a href="/" class="clearfix">
<img src="img/news/bread_home.png" alt="">
<p>返回首页</p>
</a>
</li>
<li>
<img src="img/news/bread_back.png" alt="">
</li>
<li>
<a href="/news.html">
<img src="img/news/bread_news.png" alt="">
<p>新闻资讯</p>
</a>
</li>
<li>
<img src="img/news/bread_back.png" alt="">
</li>
<li>
<a href="#">
<img src="img/news/bread_newsinfo.png" alt="">
<p>新闻详情</p>
</a>
</li>
</ul>
</div>
<!--文章-->
<article class="container">
<p>麻辣香锅店怎么经营好?</p>
<!--时间作者等-->
<div class="">
<p>时间:2019.04.04</p>
<p>编辑:蜀小帅</p>
</div>
<main>
<p>
现在人们的生活节奏越来越快,对生活用餐模式要求也越来越高,特别是上班族对用餐的需求用来越大,近年来,快餐行业的兴起大家都看在眼里。虽然餐饮行业里面有很多不定因素,对创业者来说存在各种各样的挑战,但还是有很多创业者纷纷加入其中,至于是否盈利,这是一个值得深思的问题。那么到底什么样的快餐项目才适合大家的发展呢?</p>
<div>
<a href="#">
<img src="" alt="">
</a>
</div>
<p>只要你选择有实力的麻辣香锅加盟,总部强大的经营团队,不断推出新的美食系列,轻松助你走上成功的道路。</p>
</main>
</article>
<!--上下篇-->
<div class="prev-next container">
<a href="newsinfo.html">
上一篇:麻辣香锅怎么加盟?
</a>
<a href="newsinfo.html">
下一篇:加盟麻辣香锅需要注意的问题。
</a>
</div>
<footer>
<p class="foot-logo"></p>
<p>地址:杭州市滨江区味捷餐饮</p>
<p>全国免费加盟热线:400-9016-799</p>
</footer>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<!--固定的联系方式等-->
<div class="teles-box">
<a href="tel:400-9016-799">
<img src="img/home/msg_bottom_img.png" alt="">
<p>留言资讯</p>
</a>
<a href="#">
<img src="img/home/join_bottom_img.png" alt="">
<p>招商加盟</p>
</a>
</div>
</div>
<!--引入mui的js-->
<script src="lib/mui/js/mui.min.js"></script>
<!--引入swiper-->
<script src="lib/swiper/swiper.min.js"></script>
<!--引入zepto-->
<script src="lib/jq/jquery-1.10.2.min.js"></script>
<script src="js/common.js"></script>
<script>
$(function () {
mui.init()
// 初始化mui滑动
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});
// swiper 轮播图初始化
var mySwiper = new Swiper('.swiper-container', {
loop: true,
effect: 'fade',
// 如果需要分页器
pagination: '.swiper-pagination',
})
})
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化