加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
cost.html 11.86 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/cost.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="xia wow fadeInRight">
<img src="img/coast/left_xia.png" alt="">
</div>
<div class="bk wow fadeInLeft">
<img src="img/coast/ringht_beike.png" alt="">
</div>
<!-- 侧滑导航根容器 -->
<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">
<a class="mui-navigate-right" href="#">新闻中心</a>
<div class="mui-collapse-content small-item-con">
<a href="/news.html" class="">新闻资讯</a>
</div>
</li>
<li class="mui-table-view-cell mui-collapse small-item mui-active">
<a class="mui-navigate-right" href="#">招商加盟</a>
<div class="mui-collapse-content small-item-con">
<a href="javascript:void(0);" class="tab-active">加盟费用</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/company/bread_home.png" alt="">
<p>返回首页</p>
</a>
</li>
<li>
<img src="img/company/bread_back.png" alt="">
</li>
<li>
<a href="#">
<img src="img/coast/bread_coast.png" alt="">
<p>加盟费用</p>
</a>
</li>
</ul>
</div>
<!--顶部信息-->
<div class="top-info container clearfix">
<!--右边-->
<div class="top-right">
<img src="img/coast/top_right.png" alt="">
</div>
</div>
<!--区域加盟和单店加盟-->
<div class="join_box">
<!--区域加盟-->
<div class="join1">
<img src="img/coast/join_01.png" alt="">
</div>
<!--单店加盟-->
<div class="join2">
<img src="img/coast/join_02.png" alt="">
</div>
</div>
<!--投资预算-->
<div class="budget">
<!--标题-->
<div class="budget-title">
</div>
<!--文字区域-->
<div class="bg-content">
<ul>
<li>
<span>经营面积</span>
<span>30 - 50 平方米</span>
</li>
<li>
<span>品种</span>
<span>小吃、快餐、饮料</span>
</li>
<li>
<span>产品比例</span>
<span>外卖80%、打包9%、食堂1%</span>
</li>
<li>
<span>加盟费</span>
<span>3.98 万元</span>
</li>
<li>
<span>保证金</span>
<span>2 万元</span>
</li>
<li>
<span>合同期限</span>
<span>3 年</span>
</li>
<li>
<span>培训人数</span>
<span>3人</span>
</li>
<li>
<span>带店时间</span>
<span>5 天</span>
</li>
<li>
(本材料为宣传资料,不具备法律效力,以具体各项签约合同为准)</li>
</ul>
</div>
</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 助手
尝试更多
代码解读
代码找茬
代码优化