根本文件夹
设置视口标签及引入css初始化款式
留神:css初始化款式必须位于css首页款式前面，否则容易出bug
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 引入视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入css首页款式及css初始化款式 --> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/normalize.css"> <title>携程网</title></head><body></body></html>body设置罕用款式
header局部
注意事项：采纳固定定位，肯定要给最大宽度及最小宽度，利用弹性盒技术及如何让盒子居中对齐 css3伪元素的办法
焦点图
思路：容器外面放图像 图像的宽度设置为100%
部分导航
主导航局部
html
<div class="nav"> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav_commen"> <div class="nav_items"> <a href="#">海内酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> <div class="nav_items"> <a href="#">海内酒店</a> <a href="#">特价酒店</a> </div> </div>css
/* 部分导航局部 */ .local-nav { display: flex; height: 64px; background-color: #fff; margin: 5px; border-radius: 8px; } .local-nav li { flex: 1; } .local-nav a { display: flex; flex-direction: column; align-items: center; font-size: 12px; } span[class^='local-nav-icon'] { width: 32px; height: 32px; background: url(../img/localnav_bg.png) no-repeat; background-size: 32px auto; margin: 5px; } span.local-nav-icon-icon1 { background-position: 0px 0px; } span.local-nav-icon-icon2 { background-position: 0px -32px; } span.local-nav-icon-icon3 { background-position: 0px -64px; } span.local-nav-icon-icon4 { background-position: 0px -96px; } span.local-nav-icon-icon5 { background-position: 0px -128px; } /* 主导航局部 */ .nav { overflow: hidden; border-radius: 8px; } div.nav_commen { display: flex; height: 88px; background-color: pink; } .nav_commen:nth-of-type(1) { background: -webkit-linear-gradient(left, #FA5A55, #FA994D); } .nav_commen:nth-of-type(2) { background: -webkit-linear-gradient(left, #4B90ED, #53BCED); } .nav_commen:nth-of-type(3) { background: -webkit-linear-gradient(left, #34C2A9, #6CD559); } .nav_commen .nav_items:nth-of-type(1) a { border: none; background: url(../img/hotel.png) no-repeat bottom center; background-size: 121px auto; } .nav_items { flex: 1; display: flex; flex-direction: column; } .nav_items a:nth-of-type(1) { border-bottom: 1px solid #fff; } .nav_items a { flex: 1; text-align: center; line-height: 44px; font-size: 14px; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, .2); } .nav_items:nth-of-type(-n+2) { border-right: 1px solid white; } .nav_commen:nth-of-type(2) { margin: 2px 0px; }留神:多应用flex技术选型
测导航栏局部
<!-- 侧导航栏局部 --> <div class="subnav-entry"> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> </div>做法：与部分导航统一，利用弹性盒属性
销售模块
多利用伪元素制作图标即可
渐变色
源码
源码：https://pan.baidu.com/s/1h3z4...