携程网的手机端地址：http://m.ctrip.com/html5/
练习：只做中间的那一部分
1、携程网的准备工作
初始化css样式：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px; /*最小宽度*/
max-width: 540px; /*最大宽度*/
margin: 0 auto;
}
2、携程网头部的制作
html代码
<header>
<img src="img/heder.jpg" width="768" height="154" alt=""/>
</header>
css代码
header {
width: 100%;/*继承body的宽度 body：540*/
height: 100px;
}
header img {
width: 100%; /*继承父亲的宽度*/
height: 100%;
}
效果图：
1.png
携程网nav部分：
原效果图：
2.png
3、携程网nav部分上
html代码
<nav>
<div class="row">
<div class="row3">1</div>
<div class="row3">2</div>
<div class="row3">3</div>
</div>
</nav>
css代码
nav {
padding: 5px;
}
.row {
width: 100%;
height: 90px;
background-color: pink;
border-radius: 8px;
}
效果图：
3.png
4、携程网nav部分中
把行拆分成列
分成3列
html代码
<nav>
<div class="row">
<div class="row3">1</div>
<div class="row3">2</div>
<div class="row3">3</div>
</div>
</nav>
css代码
nav {
padding: 5px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩盒布局 给父亲添加*/
}
.row3 {
flex: 1; /*孩子没人占一份*/
border-left: 1px solid #fff;
}
.row3 div:first-child {
border: 0;
}
效果图：
4.png
5、携程网nav部分下
再分上下两等份
html代码
<nav>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
</nav>
css代码
nav {
padding: 5px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩盒布局 给父亲添加*/
}
.row3 {
flex: 1; /*孩子没人占一份*/
border-left: 1px solid #fff;
}
.row3 div:first-child {
border: 0;
}
.hotel {
display: flex;/*一定是父亲*/
flex-direction: column; /*一定是给父亲加 垂直排列*/
}
.hotel a {
flex: 1;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: 45px;
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
效果图：
5.png
6、携程网nav部分结束
html代码
<nav>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3">1</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</nav>
css代码
nav {
padding: 5px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩盒布局 给父亲添加*/
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1; /*孩子没人占一份*/
border-left: 1px solid #fff;
}
.row3 div:first-child {
border: 0;
}
.hotel {
display: flex;/*一定是父亲*/
flex-direction: column; /*一定是给父亲加 垂直排列*/
}
.hotel a {
flex: 1;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: 45px;
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
效果图：
QQ截图20180705161711.png
完整代码：
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>携程网</title>
<link rel="stylesheet" type="text/css" href="css/XCW.css"/>
</head>
<body>
<header>
<img src="img/heder.jpg" width="768" height="154" alt=""/>
</header>
<nav>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</nav>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px; /*最小宽度*/
max-width: 540px; /*最大宽度*/
margin: 0 auto;
}
header {
width: 100%;/*继承body的宽度 body：540*/
height: 100px;
}
header img {
width: 100%; /*继承父亲的宽度*/
height: 100%;
}
nav {
padding: 5px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩盒布局 给父亲添加*/
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1; /*孩子没人占一份*/
border-left: 1px solid #fff;
}
.row3 div:first-child {
border: 0;
}
.hotel {
display: flex;/*一定是父亲*/
flex-direction: column; /*一定是给父亲加 垂直排列*/
}
.hotel a {
flex: 1;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: 45px;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);/*文字阴影*/
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
效果图：
6.png
