移动端布局之flex布局4：案例：携程网首页案例制作（曾经的版本）3

最新推荐文章于 2024-02-07 23:24:48 发布
最新推荐文章于 2024-02-07 23:24:48 发布
阅读量156 收藏
点赞数
分类专栏： 移动端布局 前端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/131091669
版权

移动端布局之flex布局4

案例：携程网首页案例制作（曾经的版本）

更多福利模块制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>携程在手，收走就走</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--顶部搜索-->
    <div class="search-index">
        <div class="search">观音桥步行街门票·酒店·美食</div>
        <a href="#" class="user">旅游地图</a>
    </div>
    <!--焦点图模块-->
    <div class="focus">
        <img src="./upload/focus.jpg" alt="">
    </div>
    <!--局部导航栏-->
    <ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon1"></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="周边游">
                <span class="local-nav-icon-icon2"></span>
                <span>周边游</span>
            </a>
        </li>
        <li>
            <a href="#" title="美食林">
                <span class="local-nav-icon-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li>
            <a href="#" title="一日游">
                <span class="local-nav-icon-icon4"></span>
                <span>一日游</span>
            </a>
        </li>
        <li>
            <a href="#" title="当地攻略">
                <span class="local-nav-icon-icon5"></span>
                <span>当地攻略</span>
            </a>
        </li>
    </ul>
    <!--主导航栏-->
    <nav>
        <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>
        <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>
        <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>
    </nav>
    <!--侧导航栏-->
    <ul class="subnav-entry">
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon1"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon2"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon3"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon4"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon5"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon6"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon7"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon8"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon9"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon10"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
    </ul>
    <!--销售模块-->
    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
    </div>
</body>
</html>

index.css

body{
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #f2f2f2;
    font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;
    color: #000;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
}
ul{
    list-style: none;
    /*ul有默认的padding和margin值*/
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: #222;
}
div{
    box-sizing: border-box;
}
/*搜索模块*/
.search-index{
    /*固定定位跟父级没有关系，它以屏幕为主*/
    position: fixed;
    top: 0;
    /*居中对齐*/
    left: 50%;
    transform: translateX(-50%);
    /*固定的盒子应该有宽度*/
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    background: linear-gradient(to right,#2fa2ff,#2285fa);
    display: flex;
}
.search{
    flex: 1;
    height: 26px;
    background-color: #fff;
    margin: 7px 10px;
    border-radius: 15px;
    position: relative;
    font-size: 12px;
    line-height: 26px;
    padding-left: 10px;
    color: #666;
}
.search::after{
    position: absolute;
    top: 1px;
    right: 1px;
    content: "搜索";
    width: 45px;
    height: 24px;
    font-size: 12px;
    border-radius: 15px;
    background: linear-gradient(to right,#33c6fc,#3fabff);
    text-align: center;
    line-height: 24px;
    color: #fff;
}
.user{
    width: 50px;
    height: 44px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    /*background-color: mediumpurple;*/
}
.user::before{
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/map.png) no-repeat;
    background-size: 24px;
    margin: 0 auto;
}
/*focus*/
.focus{
    margin: 50px 10px 0;
}
.focus img{
    width: 100%;
    border-radius: 10px;
}
/*局部导航栏*/
.local-nav{
    height: 64px;
    margin: 3px 4px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
}
.local-nav li{
    flex: 1;
}
.local-nav a{
    display: flex;
    flex-direction: column;
    /*侧轴居中对齐，因为是单行*/
    align-items: center;
}
/*使用属性选择器对各个图片进行替换*/
.local-nav li [class^="local-nav-icon"]{
    margin-top: 8px;
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3{
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4{
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
    background-position: 0 -128px;
}
/*nav*/
nav{
    overflow:hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common{
    height: 88px;
    background-color: pink;
    display: flex;
}
.nav-common:nth-child(2){
    margin: 3px 0;
}
.nav-items{
    /*子也可以当父成为flex容器*/
    flex: 1;
    display: flex;
    flex-direction: column;
}
/*-n+2就是选择前两个，n+2是从第二个开始*/
.nav-items:nth-child(-n+2){
    border-right: 1px solid #fff;
}
.nav-items a{
    flex: 1;
    line-height: 44px;
    text-align: center;
    color: #ffff;
    /*文字阴影*/
    text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a{
    border-bottom: 0;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}
.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);
}
/*侧导航栏*/
.subnav-entry{
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
}
.subnav-entry li{
    /*里面的子盒子可以写%相对于父亲来说*/
    flex: 20%;
}
.subnav-entry a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry li [class^="subnav-entry-icon"]{
    margin-top: 4px;
    width: 28px;
    height: 28px;
    background: url("../images/subnav-bg.png") no-repeat 0 0;
    background-size: 28px auto;
}
.subnav-entry li .subnav-entry-icon-icon2{
    background-position: 0 -30px;
}
.subnav-entry li .subnav-entry-icon-icon3{
    background-position: 0 -65px;
}
.subnav-entry li .subnav-entry-icon-icon4{
     background-position: 0 -322px;
 }
.subnav-entry li .subnav-entry-icon-icon5{
    background-position: 0 -100px;
}

.subnav-entry li .subnav-entry-icon-icon6{
    background-position: 5px -160px;
}
.subnav-entry li .subnav-entry-icon-icon7{
    background-position: 0 -195px;
}
.subnav-entry li .subnav-entry-icon-icon8{
    background-position: 0 -130px;
}
.subnav-entry li .subnav-entry-icon-icon9{
    background-position: 0 -230px;
}
.subnav-entry li .subnav-entry-icon-icon10{
    background-position: 5px -288px;
}
/*sales-box*/
.sales-box{
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}
.sales-hd{
    position: relative;
    height: 44px;
    border-bottom:1px solid #ccc
}
.sales-hd h2{
    /*文字缩进*/
    text-indent: -999px;
    overflow: hidden;
    position: relative;
}
.sales-hd h2::after{
    content: "";
    position: absolute;
    top: 8px;
    left: 20px;
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
.more{
    position: absolute;
    right: 5px;
    top: 0;
    background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}
.more::after{
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

在这里插入图片描述

内容模块制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>携程在手，收走就走</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--顶部搜索-->
    <div class="search-index">
        <div class="search">观音桥步行街门票·酒店·美食</div>
        <a href="#" class="user">旅游地图</a>
    </div>
    <!--焦点图模块-->
    <div class="focus">
        <img src="./upload/focus.jpg" alt="">
    </div>
    <!--局部导航栏-->
    <ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon1"></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="周边游">
                <span class="local-nav-icon-icon2"></span>
                <span>周边游</span>
            </a>
        </li>
        <li>
            <a href="#" title="美食林">
                <span class="local-nav-icon-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li>
            <a href="#" title="一日游">
                <span class="local-nav-icon-icon4"></span>
                <span>一日游</span>
            </a>
        </li>
        <li>
            <a href="#" title="当地攻略">
                <span class="local-nav-icon-icon5"></span>
                <span>当地攻略</span>
            </a>
        </li>
    </ul>
    <!--主导航栏-->
    <nav>
        <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>
        <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>
        <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>
    </nav>
    <!--侧导航栏-->
    <ul class="subnav-entry">
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon1"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon2"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon3"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon4"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon5"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon6"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon7"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon8"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon9"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon10"></span>
                <span>wifi电话卡</span>
            </a>
        </li>
    </ul>
    <!--销售模块-->
    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#" id="">
                    <img src="./upload/pic1.jpg" alt="">
                </a>
                <a href="#" id="">
                    <img src="./upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#" id="">
                    <img src="./upload/pic3.jpg" alt="">
                </a>
                <a href="#" id="">
                    <img src="./upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#" id="">
                    <img src="./upload/pic5.jpg" alt="">
                </a>
                <a href="#" id="">
                    <img src="./upload/pic6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
</html>

index.css

body{
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #f2f2f2;
    font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;
    color: #000;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    font-size: 14px;
}
ul{
    list-style: none;
    /*ul有默认的padding和margin值*/
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: #222;
}
div{
    box-sizing: border-box;
}
/*搜索模块*/
.search-index{
    /*固定定位跟父级没有关系，它以屏幕为主*/
    position: fixed;
    top: 0;
    /*居中对齐*/
    left: 50%;
    transform: translateX(-50%);
    /*固定的盒子应该有宽度*/
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    background: linear-gradient(to right,#2fa2ff,#2285fa);
    display: flex;
}
.search{
    flex: 1;
    height: 26px;
    background-color: #fff;
    margin: 7px 10px;
    border-radius: 15px;
    position: relative;
    font-size: 12px;
    line-height: 26px;
    padding-left: 10px;
    color: #666;
}
.search::after{
    position: absolute;
    top: 1px;
    right: 1px;
    content: "搜索";
    width: 45px;
    height: 24px;
    font-size: 12px;
    border-radius: 15px;
    background: linear-gradient(to right,#33c6fc,#3fabff);
    text-align: center;
    line-height: 24px;
    color: #fff;
}
.user{
    width: 50px;
    height: 44px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    /*background-color: mediumpurple;*/
}
.user::before{
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/map.png) no-repeat;
    background-size: 24px;
    margin: 0 auto;
}
/*focus*/
.focus{
    margin: 50px 10px 0;
}
.focus img{
    width: 100%;
    border-radius: 10px;
}
/*局部导航栏*/
.local-nav{
    height: 64px;
    margin: 3px 4px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
}
.local-nav li{
    flex: 1;
}
.local-nav a{
    display: flex;
    flex-direction: column;
    /*侧轴居中对齐，因为是单行*/
    align-items: center;
}
/*使用属性选择器对各个图片进行替换*/
.local-nav li [class^="local-nav-icon"]{
    margin-top: 8px;
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3{
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4{
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
    background-position: 0 -128px;
}
/*nav*/
nav{
    overflow:hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
.nav-common{
    height: 88px;
    background-color: pink;
    display: flex;
}
.nav-common:nth-child(2){
    margin: 3px 0;
}
.nav-items{
    /*子也可以当父成为flex容器*/
    flex: 1;
    display: flex;
    flex-direction: column;
}
/*-n+2就是选择前两个，n+2是从第二个开始*/
.nav-items:nth-child(-n+2){
    border-right: 1px solid #fff;
}
.nav-items a{
    flex: 1;
    line-height: 44px;
    text-align: center;
    color: #ffff;
    /*文字阴影*/
    text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a{
    border-bottom: 0;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}
.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);
}
/*侧导航栏*/
.subnav-entry{
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
}
.subnav-entry li{
    /*里面的子盒子可以写%相对于父亲来说*/
    flex: 20%;
}
.subnav-entry a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry li [class^="subnav-entry-icon"]{
    margin-top: 4px;
    width: 28px;
    height: 28px;
    background: url("../images/subnav-bg.png") no-repeat 0 0;
    background-size: 28px auto;
}
.subnav-entry li .subnav-entry-icon-icon2{
    background-position: 0 -30px;
}
.subnav-entry li .subnav-entry-icon-icon3{
    background-position: 0 -65px;
}
.subnav-entry li .subnav-entry-icon-icon4{
     background-position: 0 -322px;
 }
.subnav-entry li .subnav-entry-icon-icon5{
    background-position: 0 -100px;
}

.subnav-entry li .subnav-entry-icon-icon6{
    background-position: 5px -160px;
}
.subnav-entry li .subnav-entry-icon-icon7{
    background-position: 0 -195px;
}
.subnav-entry li .subnav-entry-icon-icon8{
    background-position: 0 -130px;
}
.subnav-entry li .subnav-entry-icon-icon9{
    background-position: 0 -230px;
}
.subnav-entry li .subnav-entry-icon-icon10{
    background-position: 5px -288px;
}
/*sales-box*/
.sales-box{
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}
.sales-hd{
    position: relative;
    height: 44px;
    border-bottom:1px solid #ccc
}
.sales-hd h2{
    /*文字缩进*/
    text-indent: -999px;
    overflow: hidden;
    position: relative;
}
.sales-hd h2::after{
    content: "";
    position: absolute;
    top: 8px;
    left: 20px;
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
.more{
    position: absolute;
    right: 5px;
    top: 0;
    background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}
.more::after{
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
.row{
    display: flex;
    border-bottom: 1px solid #eee;
}
.row a{
    flex: 1;
}
.row a img{
    width: 100%;
}
.row a:nth-child(1){
    border-right: 1px solid #eee;
}

请添加图片描述

VillanelleS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动WEB开发之flex布局--携程网首页案例制作
薛定谔的猫
11-30 805
做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size。起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top。方案：我们采取单独制作移动页面方案。要设置为主轴为y轴,侧轴居中。背景渐变必须添加浏览器私有前缀。技术：布局采取flex布局。利用属性选择器更换背景图片。sales-bd模块制作。第一个a要取消下边框。
移动WEB开发之flex布局—— 携程网首页案例制作
weixin_45655555的博客
11-09 1326
flexbox(flexible box) 1. flex容器（flex container）——父级元素 1.1 属性 flex-derection flex-wrap flex-flow justify-content align-items align-content 2. flex项目（flex item）子集元素 2.1 属性 flex-grow 放大的比例 flex-shrink 缩小的比例 flex-basis 伸缩基准值 flex：flex-grow flex-shrink flex-
移动端flex布局携程网首页案例制作（技术选型，搭建文件夹结构，设置视口标签以及引入初始化样式，常见flex布局思路，背景线性渐变，CSS初始化样式（公共样式，首页样式），首页代码，最终效果）
shy的博客
10-16 799
移动端flex布局携程网首页案例制作（技术选型，搭建文件夹结构，设置视口标签以及引入初始化样式，常见flex布局思路，背景线性渐变，CSS初始化样式（公共样式，首页样式），首页代码，最终效果）
携程网移动端首页制作（html5+css3）
qq_53767416的博客
09-14 8398
携程网移动端页面首页制作（html5+css3）
移动开发—详解flex布局之携程网首页案例制作
道阻且长，行则将至。
05-18 1063
移动开发—详解flex布局之携程网首页案例制作 学习内容 一、flex的布局原理 二、flex布局父项常见的属性 三、flex布局子项常见的属性 四、携程网首页案例制作 一、flex的布局原理 总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序 二、flex布局父项常见的属性 （一）、flex-direction设置主轴的方向 主轴与侧轴 在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴 默认主轴方向就是x轴方向，水平向右 默认侧轴方向就是y轴
携程网移动端flex布局案例
05-16
在本文中，我们将深入探讨如何运用Flex布局技术来构建携程网移动端的首页，结合CSS3样式、精灵图和渐变色等前端技术，实现头尾固定、中间自适应的页面设计。Flex布局（Flexible Box）是现代Web开发中的一个重要概念...
移动端的携程网静态首页制作，采用flex布局
10-20
在移动端的网页设计中，携程网的静态首页制作是一个典型的示例，它涉及到现代Web开发中的许多关键技术和最佳实践。本项目主要采用Flex布局来实现响应式设计，以确保页面在不同尺寸的移动设备上都能呈现出良好的用户...
【移动端网页布局】Flex 弹性布局案例 ③
最新发布
03-06
在移动端网页设计中，Flex布局，全称是Flexible Box，是一种强大的盒模型布局方式，尤其适合处理复杂的、响应式的界面。本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex...
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
在携程首页这个案例中，我们可以看到Flex布局是如何实现页面元素的自适应和优化的。 首先，开启Flex布局需要在容器元素上设置`display: flex;`。这会使得容器成为Flex容器，其内部的直接子元素称为Flex项目。在携程...
携程网首页主要利用flex布局实现
05-02
利用flex布局完成了对携程网首页的制作，主要是flex为主，其他为辅的一个源代码分享给大家，希望可以对大家有帮助
移动端携程网首页flex布局完整制做(详细代码版)含footer部分
周百万的博客
09-06 2148
主要思路： 1、让盒子的高度固定，只让他们的宽度随着屏幕的大小而变化！ 2、search-index 父盒子固定定位，固定定位的盒子必须有宽度，所以让他的宽度为100% 3、固定定位的盒子，是以屏幕为准的，所以body中的margin：0 auto;对他不管用 4、因此他使用left:50%;(让他的最左边移动到屏幕的一半位置)，再使用transform：translateX(-50%) (这里的50%是以当前移动的盒子为准的)，就是让这个盒子再往左移动盒子本身一半的长度
flex布局-携程网项目
不定时分享最优质的网络技术与教程，满满的干货。
12-29 1314
flex布局中是默认不换行的（如果超过父盒子子元素会被压缩），项目都排在一条线（又称“轴线”） 上可使用flex-wrap进行调整。注意: 主轴和侧轴是会变化， flex-direction 设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的。设置子项在侧轴的排列方式，且只能用于子元素出现换行的情况下使用（多行），在单行下没有效果。该元素是控制子项在侧轴（默认Y轴）上的排列方式，在子元素为单项（单行）的时候使用。定义项目（子元素）在主轴上的对齐方式，在使用之前一定要。传统布局与flex弹性布局。
携程网首页案例制作（移动端）
guai_guai_guai的博客
02-07 1323
直接添加图片即可，但因为上面搜索区域是固定定位，不占据位置，下方图片某部分会被搜索区域覆盖住，因此要设置焦点图区域的padding-left使其往下方移动。搜索模块是一个固定定位，它与父亲没有关系，只与视口有关，所以设定位置为水平居中时，要以视口为标准。background:linear-gradient(起始方向，颜色1，颜色2，...);通常要设置最大宽度，最小宽度，水平居中，字体设置，背景颜色以及相关初始化。伪元素添加定位之后就变成行内块元素。三个子盒子就用到了线性渐变。固定定位的盒子要有宽度。
flex布局 H5携程移动端局部布局 （五）
老段的CSDN的博客
08-15 575
li里边写一个超链接；超链接里边紧接着写两个span，一个图标一个文字。把后边的图片全部都加载上来 -----下边这张是素材。给图片来点距离上边的间距；3、把li标签由列变行；1、创建一个背景，给些间距和颜色。1、先实现类似轮播图的图片。...
移动WEB开发之flex布局-携程网案例
qq_46199553的博客
09-09 561
1.1 传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 传统布局  兼容性好  布局繁琐  局限性，不能再移动端很好的布局 flex 弹性布局  操作方便，布局极为简单，移动端应用很广泛  PC 端浏览器支持情况较差  IE 11或更低版本，不支持或仅部分支持 2.1 布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器
flex布局：携程网移动端首页案例
weixin_55701027的博客
12-21 959
html + css 前端flex布局基础案例
前端学习之携程网移动端首页制作
Cai_Smallwhite的博客
10-20 4680
目录1、准备工作2、搜索模块制作3、焦点图模块制作4、1.1 技术选型1.2 搭建相关文件（夹）1.3 设置视口标签以及引入初始化样式2.1 布局分析2.2 user用户小模块 1、准备工作 2、搜索模块制作 3、焦点图模块制作 4、 1.1 技术选型 方案：采取单独制作移动端页面方案 技术：布局采取flex布局 1.2 搭建相关文件（夹） 1.3 设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, initial-s
使用Flex布局实现携程APP首页布局
Lucivita的博客
01-19 1728
一、整体分析 这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分 二、具体样式实现 1、全局样式设置 导入normalize.css并设置一下body 2、搜索栏 <div class="short-search"> <div class="search"> <p>搜索:目的地/酒店/景点/航班号</p> </div> &.
移动端flex布局案例
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值