flex布局 H5携程移动端中间布局 （六）

实现上边的效果

1、先把背景和三个大模块先实现出来 简称外景

<nav>
        <div class="nav-common">1</div>
        <div class="nav-common">2</div>
        <div class="nav-common">3</div>
    </nav>
1
2
3
4
5

/* nav */
nav{
    /* 溢出隐藏 给一个元素中设置overflow:hidden,    在这里面那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位 */
    /* 不写这个就不显示圆角 */
    overflow: hidden;
    border-radius: 8px;
    /* 上 左  下  */
    /* https://www.runoob.com/css/css-margin.html  margin详解 */
    margin: 0 4px 3px;
}
.nav-common{
    height: 88px;
    background-color: wheat;
}
/* :nth-child(2)   指定每个 nav-common 元素匹配的父元素中第 2 个子元素的上下间距3px： */
.nav-common:nth-child(2){
    margin: 3px 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

把第一个模块分成三等分

 <div class="nav-common">
            <div class="nav-items">1</div>
            <div class="nav-items">2</div>
            <div class="nav-items">3</div>
        </div>
1
2
3
4
5

给父亲 添加一个display:flex
.nav-items{
    flex: 1;
}
1
2
3
4

添加内边框

/* -n+2 就是前两个   -n+3就是前三个 */
.nav-items:nth-child(-n+2){
    border-right: 2px solid #fff;

}
1
2
3
4
5

先实现右边模块两个 上下文字

子元素也能当父元素

    <div class="nav-common">
            <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>
1
2
3
4
5
6
7
8
9
10
11
12
13

.nav-items{
    flex: 1;
    display: flex;
    /* 由行变列 */
    flex-direction: column;
}
.nav-items a{
    flex: 1;
    color: #fff;
     /* 表示行高，用于控制文字间的间距 */
     line-height: 44px;
     text-align: center;
     font-size: 14px;
     /* 添加一个文字阴影 */
     text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上下文字中间添加一条横线 思路是 给上边的文字添加一条底线

/* 加载模块中间的分开线    nth-child(1)  代表上边那部分 */
.nav-items a:nth-child(1){
    /* 从上边开始添加底线  */
    border-bottom: 3px solid #fff;
}
1
2
3
4
5

添加背景图片
素材

.nav-items:nth-child(1) a{
    border: 0;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}
1
2
3
4
5

改背景颜色 用渐变

/* 加背景渐变色 */
.nav-common:nth-child(1){
    background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2){
    background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3){
    background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}
1
2
3
4
5
6
7
8
9
10