模仿的是导航栏的部分,主要是为了应用伸缩布局的相关知识和熟悉知识点。
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<title>携程网</title>
<style type="text/css">
*{/*第一步清除默认*/
margin: 0;
padding: 0;
}
/*从上到下都是统一的宽度,所以设置在body里面*/
body{
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
header{
width: 100%;/*继承父亲宽度*/
height:100px;/*高度是固定的*/
}
header img{
width:100%;
height:100px;
}
.row{
height:90px;
background: linear-gradient(to right, rgba(250,109,83,1), rgba(250,154,77,1));
border-radius: 8px 8px;
margin: 5px;
display: flex;
}
.row3{
flex:1;
}
.detail{
display: flex;
flex-direction:column;/*垂直排列*/
border-left: 1px solid #fff;
}
.row3 a{
color: #fff;
text-decoration: none;
display: block;
font-size: 15px;
text-align: center;
line-height: 45px;
height: 45px;
}
.detail a:first-child{
border-bottom:1px solid #fff;
}
.row:nth-child(2){
background: linear-gradient(to right, rgba(75,144,237,1), rgba(82,186,237,1));
}
.row:nth-child(3){
background: linear-gradient(to right, rgba(55,195,166,1), rgba(106,212,89,1));
}
.row3:first-child{
background: url(images/hotel.png) no-repeat;
background-size: auto 50px;
background-position: center bottom;
}
.row:nth-child(2) .row3:first-child{
background: url(images/flight.png) no-repeat;
background-size: auto 50px;
background-position: center bottom;
}
.row:nth-child(3) .row3:first-child{
background: url(images/travel.png) no-repeat;
background-size: auto 50px;
background-position: center bottom;
}
</style>
</head>
<body>
<header>
<img src="images/header1.jpg">
</header>
<nav>
<div class="row">
<div class="row3">
<a href="#">酒店</a>
</div>
<div class="row3 detail">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 detail">
<a href="#">特价酒店</a>
<a href="#">民宿/客栈</a>
</div>
</div>
<div class="row">
<div class="row3">
<a href="#">飞机票</a>
</div>
<div class="row3 detail">
<a href="#">火车票</a>
<a href="#">特价机票</a>
</div>
<div class="row3 detail">
<a href="#">汽车票 船票</a>
<a href="#">专车 租车</a>
</div>
</div>
<div class="row">
<div class="row3">
<a href="#">旅游</a>
</div>
<div class="row3 detail">
<a href="#">门票</a>
<a href="#">目的地攻略</a>
</div>
<div class="row3 detail">
<a href="#">邮轮旅行</a>
<a href="#">定制旅行</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
这个例子看似简单,实际上在样式部分还是运用了不少环环相扣的知识。我自己一开始做的效果比现在的还要差,这是第二遍。
总结:
- 定义class的时候要考虑到尽量减少样式的重复代码,比如这三栏样式一样,那么不必分别定义为hotel、flight、travel,而是统一使用row、row3这样的名称。
- 多类名的优势:既有共同样式又有不同样式的情况下使用。比如每一行的第一块和第二块、第三块都设置flex:1,里面的a都设置一样的字体样式等等,但右边两块要单独设置line-height等等。
- display:flex;flex-direction:column;是放在一起的,都在父元素中。
- CSS3渐变效果。这里使用的是background: linear-gradient(to right, rgba(250,109,83,1), rgba(250,154,77,1));表示从左到右渐变。
- 设置机票和旅行两块的时候使用的是.row:nth-child(2) .row3:first-child,而不是.row3:nth-child(4),因为它们的父元素是不一样的,不能越过.row进行计数。
- 一行三块之间的白色空隙是用border定义的,而不是padding或margin。因为为row指定了一个整体的背景色。