5.flex布局练习-携程首页

MY Daisy

已于 2022-12-28 22:38:05 修改

阅读量193

点赞数 1

分类专栏：移动端文章标签： css css3 html

于 2022-12-28 22:27:22 首次发布

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128474864

版权

移动端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

项目目录

在这里插入图片描述

涉及知识点

1.背景线性渐变

/* 背景渐变色添加 */
.nav-common:nth-child(1){
    background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}

起始方向默认是top(不写的话就是top)
还可以写成下边的样式：
就是从左上角开始

在这里插入代码片/* 背景渐变色添加 */
.nav-common:nth-child(1){
    background: -webkit-linear-gradient(left top,#fa5a55,#fa994d);
}

在这里插入图片描述

2.导航布局思路

先切换主轴为Y轴，然后让内容沿侧轴居中对齐
在这里插入图片描述

代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入我们的css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入我们首页的css -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</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-icon1"></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li><a href="#" title="周边游">
                <span class="local-nav-icon2"></span>
                <span>周边游</span>
            </a>
        </li>
        <li><a href="#" title="美食林">
                <span class="local-nav-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li><a href="#" title="一日游">
                <span class="local-nav-icon4"></span>
                <span>一日游</span>
            </a>
        </li>
        <li><a href="#" title="当地攻略">
                <span class="local-nav-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-icon1"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon2"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon3"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon4"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon5"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon6"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon7"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon8"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon9"></span>
                <span>话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon10"></span>
                <span>话费</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="sales-bd-item">
                <a href="#">
                    <img src="./upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="sales-bd-item">
                <a href="#">
                    <img src="./upload/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="sales-bd-item">
                <a href="#">
                    <img src="./upload/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic6.jpg" alt="">
                </a>
            </div>
       </div>
    </div>
</body>

</html>

css

body{
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    color: #000;
    background-color: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
a{
    text-decoration: none;
    color: #222;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
div{
    box-sizing: border-box;
}
.search-index{
    display: flex;
    /* 固定定位与父级没有关系，根据屏幕 */
    position:fixed;
    left: 50%;
    top:0;
    /* 将盒子水平居中 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 固定盒子要指定宽度 */
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height:44px;
    background-color:#f6f6f6 ;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    /* 后边有盒子sales-box是绝对定位，会悬浮于固定定位的盒子之上，导致错乱
    不信可以去掉z-index试试 */
    z-index: 1;
}
.search{
    position: relative;
    flex:1;
    height: 26px;
    border: 1px solid #ccc;
    margin: 7px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    padding-left: 25px;
    font-size: 12px;
    color: #666;
    /* 为啥居中不是26px,因为有边框，且使用了CSS3，导致盒子自减，内容区域变小（24px）,
    原本26px的行高，在24px里装不下，字体下边空白行间距溢出,所以看见字体偏下，
    行高是算的内容区域，不包括边框，如果line-height设置26，字体上沿距离盒子上沿是13px，而居中的话应该是12px，所以向下走了 */
    line-height: 24px;
}
.search::before{
    /* 绝对定位不占位置（以防把后边的文字挤到下一行）;可以有大小，block可以省掉,margin不再生效，用top\left定位置 */
    position: absolute;
    top:5px;
    left: 5px;
    content: '';
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    /* margin: 5px; */
}
.user{
    width: 44px;
    height: 44px;
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}
.user::before{
    content: '';
    /* 行内元素转为块级元素，才可以设置宽高 */
    display: block;
    width:23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    /* margin设置为负值，让盒子底部往上移动 */
    margin:4px auto -2px ;

}

/* 焦点图 */
.focus{
    margin-top: 45px;
}
.focus img{
    width:100%;
}
/* 局部导航栏 */
.local-nav{
    display: flex;
    height: 64px;
    background-color: #fff;
    margin: 3px 4px;
    border-radius: 8px;
}
.local-nav li{
    flex:1;
}
.local-nav a{
    display: flex;
    /* 主轴设为y轴 */
    flex-direction: column;
    /* 沿侧轴居中对齐 */
    align-items: center;
    font-size: 12px;
}
.local-nav li [class^="local-nav-icon"]{
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 0 ;
    background-size: 32px auto;
    margin-top: 8px;
    
}
.local-nav li .local-nav-icon2{
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon3{
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon4{
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon5{
    background-position: 0 -128px;
}
/* nav */
nav{
    border-radius: 8px;
    margin: 0 4px 3px;
    overflow: hidden;
}
.nav-common{
    display: flex;
    height: 88px;
    background-color: pink;

}
.nav-common:nth-child(2){
    margin: 3px 0;
}
/* 背景渐变色添加 */
.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);
}
.nav-common .nav-items{
    flex:1;
    display: flex;
    flex-direction: column;
}
.nav-items a{
    flex:1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字加阴影 */
    text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
/* 第一列里的a不需要有下边框 */
.nav-items:nth-child(1) a{
    border: 0;
    /* 背景图靠底端水平居中对齐 */
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
}

/* 只给前两个元素加边框 */
.nav-items:nth-child(-n+2){
    border-right: 1px solid #fff;
}
/* 侧导航栏subnav-entry */
.subnav-entry{
    display: flex;
    /* 换行 */
    flex-wrap: wrap;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    padding: 5px 0;
}
.subnav-entry li{
    /* 里边的子盒子可以写百分比，相对于父盒子来说，子盒子宽度占父盒子宽度的20% */
    flex: 20%;

}
.subnav-entry a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry a [class^="subnav-entry-icon"]{
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat 0 0;
    background-size: 28px auto;
}
.subnav-entry a .subnav-entry-icon2{
    background-position: 0 -28px;
}
.subnav-entry a .subnav-entry-icon3{
    background-position: 0 -62px;
}
.subnav-entry a .subnav-entry-icon4{
    background-position: 0 -95px;
}
/* 销售模块 */
.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{
    font-size: 0;
    position: relative;
}
.sales-hd h2::after{
    position: absolute;
    top: 13px;
    left: 20px;
    content: '';
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
.sales-hd .more{
    position: absolute;
    right:5px ;
    top: 8px;
    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);
}
.sales-bd-item{
    display: flex;
}
.sales-bd-item a{
    flex: 1;
    border-bottom: 1px solid #eee;
}
.sales-bd-item a:nth-child(1){
    border-right: 1px solid #eee;
}
.sales-bd-item a img{
    width: 100%;
}