共计 3401 个字符，预计需要花费 9 分钟才能阅读完成。
根本文件夹
设置视口标签及引入 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…
正文完
