flex布局案例：携程首页

=^_^=银爪

已于 2023-06-07 17:59:51 修改

阅读量322

点赞数 1

文章标签： css html javascript

于 2023-06-07 17:41:17 首次发布

本文链接：https://blog.csdn.net/weixin_65635437/article/details/131092680

版权

1. 携程首页

1.1、主体结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <!-- 公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script></script>
</head>
<body>
    <!-- 版心用于适配pc端 -->
    <div class="container">
        <!-- 顶部搜索栏 -->
        <div class="top-bar"></div>
        <!-- 顶部背景 -->
        <div class="header"></div>
        <!-- banner栏 -->
        <div class="banner"></div>
        <!-- 导航栏 -->
        <div class="navbar"></div>
        <!-- 网络导航 -->
        <div class="grid"></div>
        <!-- 活动列表 -->
        <div class="adv-list"></div>
        <!-- 底部 -->
        <div class="tool-box"></div>
    </div>
</body>
</html>

1.2、公共样式base.css

*{
    margin: 0px;
    padding: 0px;
    /*1.移动端盒子一般是内减盒子*/
    box-sizing: border-box;
}

body{
    /* 移动端字体大小为12px */
    font-size: 12px;
}

li{
    list-style: none;
}

img{
    vertical-align: middle;
}

a{
    color:#000;
    text-decoration: none;
    /* 移动端a链接点击具有背景样式，我们不需要这个样式，所以取消 */
    -webkit-tap-highlight-color: transparent;
}

input {
    border:1 none;
    outline-style: none;
}

/* 清除浮动样式类 */
.clear::after{
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.celar {
    zoom: 1;
}

1.3、容器适配pc端

/* 适配pc端 */
.container{
    width: 100%;
    min-width: 320;
    max-height: 750;
}

/* 设置背景颜色 */
body{
    background: #fafafc;
}

1.4、顶部搜索栏实现

结构

            <div class="search-box">
                <span>搜索:目的地/酒店/景点/航班号</span>
            </div>
            <a href="">
                <span>我 的</span>
            </a>

效果图

/* 顶部搜索栏 */
.top-bar{
    position: fixed;
    top:0;
    width:100%;
    /* 一般搜索栏高度固定是44px */
    height: 44px;

    background:transparent;

    /* 弹性布局 */
    display:flex;

    /* 里面的div是30高度，所以这里设置内边距 */
    padding:7px 10px;
}

/* 除去已占用的宽度后，的宽度 */
.top-bar .search-box{
    flex:1;
    height:30px;
    border-radius: 15px;
    background:#fff;
    /* 控制内部的放大镜与文本框向右移一些 */
    padding-left:10px;
    line-height: 30px;

    /* 放大镜相对于search-box，而不是相对于span */
    position: relative;
}
.top-bar .search-box span{
    padding-left:35px;
    color:#666;
    font-size:14px;
    line-height: 24px;;
}

/* 放大镜 */
.top-bar .search-box span::after{
    position: absolute;
    content:'';
    left:0; 
    top:0;
    width:35px;
    height: 100%;
    /* 15px 7px是微调出来的 */
    background:url(../images/home-common-sprite2x@v7.15.png) 15px 7px no-repeat;
    background-size: 21px 123px;
}

/* 登陆 */
.top-bar a{
    width:50px;
    /* background:#ccc; */
    text-align: center;
    
}
/* 登陆头像 */
.top-bar a::before{
    display:block;
    width:22px;
    height:22px;
    content:'';
    background:url(../images/home-common-sprite2x@v7.15.png) 1px -36px no-repeat;
    background-size:21px 123px;
    margin:0 auto;
}
/* 登陆两个字的颜色 */
.top-bar a span{
    color:#fff;
}

1.5、顶部背景

样式

/* 顶部背景栏 */
.header{
    width: 100%;
    height: 180px;
    background: #f5adad url(../images/banner_bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
}

1.6、banner栏

结构

            <ul>
                <li><a href="">
                    <span class="icon"></span>
                    <span>攻略·景点</span>
                </a></li>
                <li><a href="">
                    <span class="icon"></span>
                    <span>门票·玩乐</span>
                </a></li>
                <li><a href="">
                    <span class="icon"></span>
                    <span>美食林</span>
                </a></li>
                <li><a href="">
                    <span class="icon"></span>
                    <span>周边游</span>
                </a></li>
                <li><a href="">
                    <span class="icon"></span>
                    <span>一日游</span>
                </a></li>
            </ul>

样式

/* banner栏 */
.banner ul{
    /* 块元素不固定宽度，使用margin-left、right、让其他与父元素保持相对的宽度 */
    /* 高度也不设置，让高度被内容撑开 */
    /* margin:-35px 12px 10px; */
    display: flex;
    background:#fff;
    margin:-35px 12px 10px;
    text-align: center;
    padding: 4px 0 8px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.banner ul li{
    flex:1;
}

.banner ul li .icon{
    display: block;
    width:40px;
    height:40px;
    background-image:url(../images/home-fivemain-sprite2x@v7.15.png);
    background-size:40px auto;
    margin:0 auto;
}

.banner ul li:nth-child(2) .icon{
    background-position:0 -40px;
}

.banner ul li:nth-child(3) .icon{
    background-position:0 -80px;
}


.banner ul li:nth-child(4) .icon{
    background-position:0 -120px;
}

.banner ul li:nth-child(5) .icon{
    background-position:0 -160px;
}

.banner ul li span{
    color:#222;
}

导航栏

结构

            <div class="wrap">

                <div class="row r1">
                    <a class="flex5 c1" href="">酒店</a>
                    <a class="flex4 c2" href="">民宿·客栈</a>
                    <a class="flex8 c3" href=""><span>特价·爆款</span></a>
                </div>
                <div class="row r2">
                    <a class="flex5 c1" href="">机票</a>
                    <a class="flex4 c2" href="">火车票</a>
                    <a class="flex4 c3" href="">汽车·船票</a>
                    <a class="flex4 c4" href="">专车·租车</a>
                </div>
                <div class="row r3">
                    <a class="flex5 c1" href="">旅游</a>
                    <a class="flex4 c2" href="">高铁游</a>
                    <a class="flex4 c3" href="">邮轮游</a>
                    <a class="flex4 c4" href="">定制游</a>
                </div>

            </div>

样式

/* 导航栏 */
.navbar{
    width: 100%;
}

.navbar .wrap{
    height:198px;
    margin: 0 12px 1px;
    /* 配置纵向平均分 */
    display: flex;
    /* 配置纵向平均分: 改变主轴方向，让其坚向排列，可以对父元素的高度进行平均分 */
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;;

}

.navbar .row{
    /* 配置纵向平均分: 设置弹性占比为1，平均占据父元素的高度 */
    flex:1;

    /* 每一个row再采用弹性布局 */
    display: flex;

    height:100%;
}

/* 控制每一个盒子的flex占比 */
.navbar .row .flex4{
    flex:4;
}
.navbar .row .flex5{
    flex:5;
}
.navbar .row .flex8{
    flex:8;
}

/* 控制文字居中 */
.navbar .row a{
    text-align: center;
    line-height: 66px;
    color:#fff;
    font-size: 14px;
}

/* 为每一个row设置渐变 */
.navbar .r1{
    background-image:linear-gradient(to right, #fa5956, #fb8650 54%);
    border-bottom:1px solid #fff;;
}
.navbar .r2{
    background-image:linear-gradient(to right, #4b8fed, #53bced);
    border-bottom:1px solid #fff;;
}
.navbar .r3{
    background-image:linear-gradient(to right, #34c2aa, #6cd557);
}

/* 设置背景 */
.navbar .r1 .c1{
    background:url(../images/grid-nav-items-hotel@v7.15.png) right bottom no-repeat;
    background-size:73px auto;
    border-right:1px solid #fff;
}
.navbar .r1 .c2{
    background:url(../images/grid-nav-items-minsu@v7.15.png) left bottom no-repeat;
    background-size:37px auto;
    border-right:1px solid #fff;
}
/* 单独为r1 c3设置背景渐变 */
.navbar .r1 .c3{
    background-image:linear-gradient(to right,#ffbc49,#ffd252);
    /* 设置1像素的透明边框，解决坚线对不齐的问题 */
    border-right:1px solid transparent;
}

/* 再为r1 c3内的span设置背景图片 */
.navbar .r1 .c3 span{
    display: block;
    background:url(../images/grid-nav-items-hot.png) right bottom no-repeat;
    background-size:100% auto;
    color:#a05416;
}

.navbar .r2 .c1{
    background:url(../images/grid-nav-items-flight@v7.15.png) right bottom no-repeat;
    background-size:73px auto;
    border-right:1px solid #fff;
}
.navbar .r2 .c2{
    background:url(../images/grid-nav-items-train.png) left bottom no-repeat;
    background-size:37px auto;
    border-right:1px solid #fff;
}

.navbar .r2 .c3{
    border-right:1px solid #fff;
}

.navbar .r3 .c1{
    background:url(../images/grid-nav-items-travel@v7.15.png) right bottom no-repeat;
    background-size:73px auto;
    border-right:1px solid #fff;
}
.navbar .r3 .c2{
    background:url(../images/grid-nav-items-dingzhi@v7.15.png) left bottom no-repeat;
    background-size:61px auto;
    border-right:1px solid #fff;
}

.navbar .r3 .c3{
    border-right:1px solid #fff;
}

2.7、网格导航

结构

            <ul class="clear">
                <li><a href=""><i class="icon"></i><span>自由行</span></a></li>
                <li><a href=""><i class="icon"></i><span>WiFi电话卡</span></a></li>
                <li><a href=""><i class="icon"></i><span>保险·签证</span></a></li>
                <li><a href=""><i class="icon"></i><span>换钞·购物</span></a></li>
                <li><a href=""><i class="icon"></i><span>当地向导</span></a></li>
                <li><a href=""><i class="icon"></i><span>特价机票</span></a></li>
                <li><a href=""><i class="icon"></i><span>礼品卡</span></a></li>
                <li><a href=""><i class="icon"></i><span>申卡·借钱</span></a></li>
                <li><a href=""><i class="icon"></i><span>旅拍</span></a></li>
                <li><a href=""><i class="icon"></i><span>更多</span></a></li>
            </ul>

样式

/* 网络导航 */
/* 浮动产生两行，每个li内的a使用弹性布局 */
.grid{
    width: 100%;
}

.grid ul{
    margin:0 12px 12px;
}

.grid ul li{
    width:20%;
    float:left;
}

/* li内的a实现弹性布局 */
.grid ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid ul li i{
    width: 28px;
    height: 28px;
    background:url(../images/nav_sub_1.png) 0 0 no-repeat;
    background-size: 28px auto;
    margin-top: 10px;
    margin-bottom: 5px;
}

.grid ul li span{
    color:#222;
    font-size: 12px;
    font-weight: 300;
}

/* 设置每个个图标 */
.grid ul li:nth-child(2) i{
    background:url(../images/nav_sub_1.png) 0 -28px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(3) i{
    background:url(../images/nav_sub_1.png) 0 -56px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(4) i{
    background:url(../images/nav_sub_1.png) 0 -84px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(5) i{
    background:url(../images/nav_sub_1.png) 0 -112px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(6) i{
    background:url(../images/nav_sub_1.png) 0 -140px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(7) i{
    background:url(../images/nav_sub_1.png) 0 -168px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(8) i{
    background:url(../images/nav_sub_1.png) 0 -196px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(9) i{
    background:url(../images/nav_sub_1.png) 0 -224px no-repeat;
    background-size: 28px auto;
}
.grid ul li:nth-child(10) i{
    background:url(../images/nav_sub_1.png) 0 -252px no-repeat;
    background-size: 28px auto;
}

2.8、活动列表

2.8.1 活动列表头部

结构

      <!-- 活动列表头部 -->
            <div class="list-header">
                <!-- 左侧标题 -->
                <h2 class="title">
                    <i class="icon-gg"></i>
                </h2>
                <a href="">获取更多福利</a>
            </div>

样式

/* 活动列表头部 */
.adv-list{
    width: 100%;
    background: #f2f2f2;
}
.adv-list .list-header{
    width: 100%;
    padding:0 8px;
    height: 44px;

    /* 让h2内的子元素相对于当前元素定位 */
    position: relative;
}

/* 左侧标题 */
.adv-list .list-header .title{
    overflow: hidden;
    height: 0px;
}

/* 热门活动背景图 */
.adv-list .list-header .title::after{
    content: '';
    display: block;
    width: 79px;
    height: 15px;
    background:url(../images/un_home_text.png) 0 -19px no-repeat;
    background-size: 79px auto;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}

/* 广告图 */
.adv-list .list-header .icon-gg{
    position: absolute;
    width: 36px;
    height: 15px;
    top: 50%;
    transform: translateY(-50%);
    left: 90px;
    background:url(../images/icon-gg@2x.png) 0 0 no-repeat;
    background-size: 36px auto;
}

/* 获取更多福利 */
.adv-list .list-header a{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 0 18px 0 12px;

    background: linear-gradient(to right,#ff4e63,#ff6cc9);
    border-radius: 10px;
}

/* 箭头 */
.adv-list .list-header a::after{
    content:'';
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    transform: rotate(-45deg);
    border-width: 0px 2px 2px 0px;
    top: 4px;
    right: 9px;
}

2.8.2 活动列表内容

结构

样式

/* 活动内容 */
.adv-list .adv-bd{
    width: 100%;
}

.adv-list .adv-bd .row{
    width: 100%;
    display: flex;
}

.adv-list .adv-bd .row a{
    flex: 1;
}

.adv-list .adv-bd .r1{
    height: 131px;
    margin-top: 1px;
}

.adv-list .adv-bd .r2,
.adv-list .adv-bd .r3
{
    height: 81px;
    margin-top: 1px;
}

/* 设置背景图片 */
.adv-list .adv-bd .r1 .c1{
    background:url(../images/yi-hu-fu-li.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
}
.adv-list .adv-bd .r1 .c2{
    background:url(../images/bai-yuan-li-bao.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    margin-left:1px;
}
.adv-list .adv-bd .r2 .c1{
    background:url(../images/lv-xing-yong-pin.png) 0 0 no-repeat;
    background-size: 100% 100%;
}
.adv-list .adv-bd .r2 .c2{
    background:url(../images/ling-quan-zhong-xin.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    margin-left:1px;
}
.adv-list .adv-bd .r3 .c1{
    background:url(../images/yi-qing-bao-zhang.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
}
.adv-list .adv-bd .r3 .c2{
    background:url(../images/te-jia-men-piao.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    margin-left:1px;
}

/* 广告角标 */
.adv-list .adv-bd .row a{
    position: relative;
}

.adv-list .adv-bd .row a::after{
    content:'广告';
    font-size: 18px;
    width: 52px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    background: #b2b2b2;
    position: absolute;
    left:0;
    bottom:0;
    transform: scale(.5);
    transform-origin: left bottom;
    border-top-right-radius: 7px;
}

2.9、底部

按钮栏

结构

            <!-- 底部按钮 -->
            <div class="tool-cn">
                <a href="">
                    <i class="iconfont icon-phonecallcontact"></i>
                    <span>电话预定</span>
                </a>
                <a href="">
                    <i class="iconfont icon-download"></i>
                    <span>下载客户端</span>
                </a>
                <a href="">
                    <i class="iconfont icon-user"></i>
                    <span>我的</span>
                </a>
            </div>

样式

/* 底部 */
.tool-box{
    width: 100%;
    margin-top:10px;
    padding-bottom: 5px;
}

/* 底部按钮 */
.tool-box .tool-cn{
    display: flex;
    background:#fff;
    width: 100%;
    padding-bottom: 5px;
}

.tool-box .tool-cn a{
    flex:1;
    text-align: center;
    padding: 10px 0;
    color: #333;
    
    display: flex;
    flex-direction: column;
}

底部版本

结构

            <!-- 底部版本 -->
            <div class="tool-ver">
                <a href="">网站地图</a>
                 |  
                <a href="">
                    <i class="global"></i>
                    Language
                    <i class="triangle"></i>
                </a>
                 |  
                <a href="">电脑版</a>
            </div>

样式

/* 底部版本 */
.tool-box .tool-ver{
    width:100%;
    text-align: center;
    padding:10px 0 5px;
}

.tool-box .tool-ver a{
    color: #666666;
}

/* 地图 */
.tool-box .tool-ver .global{
    display:inline-block;
    width: 11px;
    height: 11px;
    background:url(../images/un_icon_sites.png) 0 -160px no-repeat;
    background-size:30px auto;
    margin-right: 7px;
}
/* 下箭头 */
.tool-box .tool-ver .triangle{
    display: inline-block;
    width: 5px;
    height: 5px;
    border: 1px solid #666;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    margin: 0 3px;
    vertical-align: 2px;
}

底部版权

结构

           <p class="copyright">
               ©<label id="copyno">2020</label>携程旅行｜<a href="http://www.miibeian.gov.cn/" class="link-icp">沪ICP备08023580号</a>
           </p>

样式

/* 底部版权 */
.tool-box .copyright{
   text-align: center;
   padding: 5px 0;
}

.tool-box .copyright,
.tool-box .copyright a
{
   color: #999;
   font-size:12px;
}