移动端三种布局方式之flex布局-携程移动端首页

最新推荐文章于 2023-01-12 19:31:43 发布

JadeDu_

最新推荐文章于 2023-01-12 19:31:43 发布

阅读量530

点赞数

本文链接：https://blog.csdn.net/JadeDu_/article/details/119772704

版权

结果图

在这里插入图片描述

flex布局原理：

所有盒子不管是行内元素还是块元素只要是flex布局都可以直接设置宽高。任何一个盒子都可以指定为flex布局。
当给父盒子设为flex布局以后，子元素的float clear vertical-align属性将失效
伸缩布局=弹性布局=flex布局=弹性盒布局=伸缩盒布局

思路解析

1. 顶部搜索模块

（1）通栏大盒子固定在浏览器上部正中间
建议做法

在这里插入图片描述

(2) 右边盒子固定大小，剩余空间全给左边，让左边盒子自适应，加一个flex:1;因此要给父盒子一个display:flex;转化为flex布局，子盒子的flex属性才可以生效。（左边的盒子在布局时要先写，右边的后写）放大镜小图标是在大盒子前面放了个伪元素。
在这里插入图片描述

右边盒子是用伪元素写的又是用精灵图写的，这样方便，在a标签里再放一个div和span太过麻烦，直接用伪元素，不用写盒子了。
（伪元素是行内元素，先转化为块元素才能设置大小）

.user::before {
    /*content属性不能忘，伪元素必备属性*/
    content: "";
    /*伪元素是行内元素，先转化为块元素才能设置大小*/
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 4px auto -2px;
}

(3)不对的写法是这样显示的
错误图例
正确代码

/* 本来给伪元素转化为块元素，用margin值调整放大镜位置。结果发现搜索框里的文字掉下去了，原因是伪元素这个块级元素一行显示，文字被挤下去了。因此换了一种写法，放大镜用绝对定位调整位置，绝对定位不占用位置!!！此时不需要转化为块元素，加了绝对定位的盒子可以直接设置大小 */
.search::before { 
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 15px;
    height: 15px;
    /* 用的精灵图 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    display: block;
    
}

（4）图片下面的字怎么把它往上调一些在这里插入图片描述
做法：

2. 焦点图模块

常见flex布局思路（改变方法，之前不是用flex也是可以做的）
在这里插入图片描述

布局

<ul class="local-nav">
    <li>
        <a href="">
            <span class="local-nav-icon"></span>
            <span>景点玩乐</span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="local-nav-icon"></span>
            <span>景点玩乐</span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="local-nav-icon"></span>
            <span>景点玩乐</span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="local-nav-icon"></span>
            <span>景点玩乐</span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="local-nav-icon"></span>
            <span>景点玩乐</span>
        </a>
    </li>
    
</ul>

css

.local-nav li{  
    /* 五个小Li各占一份 */
    flex: 1;
}
.local-nav a{
    /* 先把父亲设置flex属性 */
    display: flex;
    /* 主轴改成y轴 */
    flex-direction: column;
        /* 侧轴居中对齐，因为是单行 */
        align-items: center;
}
/* 利用属性选择器更换背景图片 */
.local-nav li [class^="local-nav-icon"]{
    width: 32px;
    height: 32px;
    background-color: pink;
    /* flex布局不会有外边距合并问题 */
    margin-top: 8px;
    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-icon4{
background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
background-position: 0 -128px;
}

3.主导航栏

（1）
在这里插入图片描述
给父盒子加了圆角不显示，是因为里面的盒子div没有圆角，因此给父盒子加个overflow:hidden；溢出隐藏，就行了

（2）

在这里插入图片描述
中间的竖线不要用margin做，给右边两个盒子加白色边框，css3盒子不会挤出去

（3）背景色线性渐变
背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名字或者度数，如果省略默认就是top

 background: -webkit-linear-gradient(left, #FA5A55, #FA994D);

(4)
在这里插入图片描述
用flex布局
左中右三个盒子，都加上flex：1；属性，平均分配，第二三个盒子再利用flex属性，里面放两个a链接（行内元素）给他们用上flex布局，主轴设置为y轴，别忘记给父元素添加display:flex;，左边盒子里也是一个a标签

nav{
    /* 给nav加了小圆角，但是div没有 */
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
nav .nav-common{
    /* 里面三个大盒子 各站三分之一*/
    display: flex;
    height: 88px;
    background-color: pink;

}
.nav-common:nth-child(n+2){
    margin: 3px 0;
}
nav .nav-common .nav-items{
    /* 以下两个属性不冲突 */
    flex: 1;
    /* 子项目a标签用来flex布局 */
    display: flex;
    /* 主轴方向改成列，子项目a标签竖直排列 */
    flex-direction: column;

}
nav .nav-common .nav-items:nth-child(n+2){
    border-left: 1px solid #fff ;
}
.nav-items a{
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影，水平，垂直 */
    text-shadow: 1px 1px rgba(0,0,0, .2);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
/* z这个图不知道为什么不能显示11 */
.nav-common .nav-items:nth-child(1) a {
    /* 本来这里有下边框，属性继承，第一个盒子要把下边框取消 */
   border: 0;
   /* 背景图 三倍图*/
   background:url(../images/hotel.png) no-repeat bottem 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);
}

4.侧导航栏

在这里插入图片描述
做法

5.热门活动模块

（1）
在这里插入图片描述
右边盒子小三角做法伪元素

/* 更多福利模块 */
.more {
    position: absolute;
    right: 5px;
    top: 0px;
    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);
}

(2)用flex布局横着三个通栏大盒子，每个盒子分成两个相等大小的盒子
在这里插入图片描述

.row {
    display: flex;
}

.row a {
    flex: 1;
    border-bottom: 1px solid #eee;
}

.row a:nth-child(1) {
    border-right: 1px solid #eee;
}

.row a img {
    width: 100%;
}

所有代码

html

<!DOCTYPE html>
<body lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程在手，说走就走</title>
    <!-- 引入移动端css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入主页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"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></span>
            <span>电话费</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="subnav-entry-icon"></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="row">
            <a href="#">
                <img src="upload/pic1.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic2.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <a href="#">
                <img src="upload/pic3.jpg" alt="">
            </a>
            <a href="#">
                <img src="upload/pic4.jpg" alt="">

            </a>
        </div>
        <div class="row">
            <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常用初始化样式
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: #f2f2f2;
    /* 不出现水平滚动条 */
    overflow-x: hidden;
    /* 取消背景高亮 */
    -webkit-tap-highlight-color: transparent;
}
/* 取消ul初始样式 */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 取消a链接初始样式 */
a {
    text-decoration: none;
    color: #222;
}
/* 使用css3盒子模型 */
div {
    box-sizing: border-box;
}
/* 头部搜索模块 */
.search-index{
    display: flex;
    /* 让搜索盒子固定在屏幕上部居中显示，固定定位和父级没关系，以屏幕为准 */
     position: fixed; 
    top: 0;
    left: 50%;
    /* 考虑到浏览器兼容性，先写一遍兼容属性，在写一遍正常的 */
    -webkit-transform: translate(-50%); 
    transform: translate(-50%); 
    height: 50px;
    /* 固定盒子应该有宽度 */
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    
}
.search{
        position: relative;
        /* 要想让文字在行内居中,有边框的盒子line-height应该要扣除边框才可以 */
        height: 26px;
        line-height: 24px;
        border: 1px solid #ccc;
        flex: 1;
        font-size: 12px;
        color: #666;
        margin: 7px 10px;
        padding-left: 25px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
/* 本来给伪元素转化为块元素，用margin值调整放大镜位置。结果发现搜索框里的文字掉下去了，原因是伪元素这个块级元素一行显示，文字被挤下去了。因此换了一种写法，放大镜用绝对定位调整位置，绝对定位不占用位置!!！此时不需要转化为块元素，加了绝对定位的盒子可以直接设置大小 */
.search::before { 
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 15px;
    height: 15px;
    /* 用的精灵图 */
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    display: block;
    
}
.user {
    width: 44px;
    height: 44px;
    /* background-color: purple; */
    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: 4px auto -2px;
}
/* 固定定位不占位置，所以把下面盒子加一个mt值，空出绝对定位位置 */
.focus{
    margin-top: 50px;
}
.focus img{
    width: 100%;
}
.local-nav{
    /* 给父级添加flex属性，里面的盒子浮动 */
    display: flex;
    height: 64px;
    background-color: #fff;
    margin:3px 4px;
    border-radius: 8px;
}
.local-nav li{  
    /* 五个小Li各占一份 */
    flex: 1;
}
.local-nav a{
    /* 先把父亲设置flex属性 */
    display: flex;
    /* 主轴改成y轴 */
    flex-direction: column;
        /* 侧轴居中对齐，因为是单行 */
        align-items: center;
}
/* 利用属性选择器更换背景图片 */
.local-nav li [class^="local-nav-icon"]{
    width: 32px;
    height: 32px;
    background-color: pink;
    /* flex布局不会有外边距合并问题 */
    margin-top: 8px;
    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-icon4{
background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5{
background-position: 0 -128px;
}
/* nav导航栏部分 */
nav{
    /* 给nav加了小圆角，但是div没有 */
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}
nav .nav-common{
    /* 里面三个大盒子 各站三分之一*/
    display: flex;
    height: 88px;
    background-color: pink;

}
.nav-common:nth-child(n+2){
    margin: 3px 0;
}
nav .nav-common .nav-items{
    /* 以下两个属性不冲突 */
    flex: 1;
    /* 子项目a标签用来flex布局 */
    display: flex;
    /* 主轴方向改成列，子项目a标签竖直排列 */
    flex-direction: column;

}
nav .nav-common .nav-items:nth-child(n+2){
    border-left: 1px solid #fff ;
}
.nav-items a{
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影，水平，垂直 */
    text-shadow: 1px 1px rgba(0,0,0, .2);
}
.nav-items a:nth-child(1){
    border-bottom: 1px solid #fff;
}
/* z这个图不知道为什么不能显示11 */
.nav-common .nav-items:nth-child(1) a {
    /* 本来这里有下边框，属性继承，第一个盒子要把下边框取消 */
   border: 0;
   /* 背景图 三倍图*/
   background:url(../images/hotel.png) no-repeat bottem 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 */

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    /* 子盒子换行显示，子盒子不写宽度，换行不起作用 */
    flex-wrap: wrap;
    padding: 5px 0;
}

.subnav-entry li {
    /* 里面的子盒子可以写 % 相对于父级来说的 */
    flex: 20%;
}

.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subnav-entry-icon {
    width: 28px;
    height: 28px;
    background-color: pink;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}
/* 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 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    position: absolute;
    top: 5px;
    left: 8px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}
/* 更多福利模块 */
.more {
    position: absolute;
    right: 5px;
    top: 0px;
    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;
}

.row a {
    flex: 1;
    border-bottom: 1px solid #eee;
}

.row a:nth-child(1) {
    border-right: 1px solid #eee;
}

.row a img {
    width: 100%;
}

JadeDu_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端三种布局方式之flex布局-携程移动端首页

结果图flex布局原理：所有盒子不管是行内元素还是块元素只要是flex布局都可以直接设置宽高。任何一个盒子都可以指定为flex布局。当给父盒子设为flex布局以后，子元素的float clear vertical-align属性将失效伸缩布局=弹性布局=flex布局=弹性盒布局=伸缩盒布局   思路解析顶部 右边盒子固定大小，剩余空间全给左边，让左边盒子自适应，加一个flex:1;...
复制链接

扫一扫