携程网的手机端地址：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