4.（css3布局）使用flex布局携程网首页案例

最新推荐文章于 2022-11-30 23:57:20 发布
最新推荐文章于 2022-11-30 23:57:20 发布
阅读量1.8k 收藏 10
点赞数 2
分类专栏： # CSS 0基础快速入门 CSS学习手册 文章标签： html css3 flex flex布局 携程网首页 案例 技术选型 移动 手机 移动端 背景颜色线性渐变 交互设计 css 常用布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112542878
版权

文章目录

1. 携程网首页案例制作


1.1 技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取flex布局为主


1.2 搭建相关文件夹

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.46
Branch： branch04
commit description：a2.46（携程网首页案例——搭建相关文件夹及框子）

tag：a2.46


1.3 设置视口标签以及引入初始化样式

<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">

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.47
Branch： branch04
commit description：a2.47（携程网首页案例——设置视口标签以及引入初始化样式）

tag：a2.47


1.4 初始化样式

-webkit-tap-highlight-color: transparent; 防止一些元素点击之后背景会高亮

overflow-x: hidden; 不出现水平滚动条

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;
}

image-20201223104603018

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.48
Branch： branch04
commit description：a2.48（携程网首页案例——初始化样式）

tag：a2.48


1.5 模块名字划分


1.6 常见flex布局思路

image-20200819225120881


1.7 背景线性渐变

image-20200819225159686

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);  
background: -webkit-linear-gradient(left, red , blue);  
background: -webkit-linear-gradient(left top, red , blue);

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


2. 代码实现

2.1 search-index

尺寸 => flex默认可以拉伸自适应各种设备，但是高度定死，宽度自适应，方便更好地呈现。

先搭建整体结构，再从上往下布局。

image-20201223121711580

第一栏搜索框，设置为固定定位，注意固定定位的盒子必须要有宽度，它与父级无关，与浏览器可视区相对偏移。设置最大和最小宽度。

注意：已经是固定定位，因此margin:0 auto; 是无效的，通过left偏移调整，移动到盒子50%，再减去容器一半的宽度即可，因为设备的缘故，所以没法确认宽度，利用transform进行百分比偏移，直接 transform: translateX(-50%);。

    left: 50%;
    transform: translateX(-50%);

也可不给left值（默认为0），也一样实现，因为body居中对齐。

为了兼容老版本的谷歌浏览器 =>-webkit-transform: translateX(-50%);

<body>
    <div class="search-index"></div>
</body>

/*搜索模块*/
.search-index {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    background-color: pink;
}

image-20201223121442432

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.49
Branch： branch04
commit description：a2.49（携程网首页案例——搜索栏布局）

tag：a2.49


可细分为两块即可。左侧输入框是自适应的，而右侧的图标是固定大小的。右边大小固定，剩余空间都给左边的盒子。

这里搜索框使用div，点击之后，进入另外一个页面。

image-20201223121711580

    <div class="search-index">
        <div class="search"></div>
        <a href="#" class="user"></a>
    </div>

/*搜索模块*/
.search-index {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    background-color: pink;
}

.search {
    flex: 1;
}

.user {
    width: 44px;
    height: 44px;
    background-color: orangered;
}

image-20201223140007346

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.50
Branch： branch04
commit description：a2.50（携程网首页案例——搜索栏布局2）

tag：a2.50


右侧的a标签中包含：上面一个图，下面一串字符串。实际在a标签里面放入盒子会很麻烦，可以使用伪元素，这样一个盒子就搞定了。

图标在精灵图中，需要测量位置。

使用fw软件，首先缩放原来一半的大小 从208*655 变为 104*328

image-20201223142818966

背景图片设置坐标和尺寸，高度可以不写直接auto。

image-20201223143118704

.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
}

image-20201223143651552

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.51
Branch： branch04
commit description：a2.51（携程网首页案例——精灵图图标）

tag：a2.51


图标位置没有居中，可以设置外边距。

    /*上 左右 下*/
    margin: 4px auto 0;

image-20201223143902143

调整字体样式并去掉下划线。

a {
    text-decoration: none;
}

.user {
    width: 44px;
    height: 44px;
    background-color: orangered;
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
}

image-20201223144347345

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.52
Branch： branch04
commit description：a2.52（携程网首页案例——完成搜索栏右边模块）

tag：a2.52


div均使用css3盒模型，省去计算内边距的问题了。

div {
    box-sizing: border-box;
}

设置输入框高度，并设置小圆角。

.search {
    height: 26px;
    border: 1px solid #ccc;
    flex: 1;
    margin: 6px 10px;
    border-redius: 5px;
}

image-20201223172019481

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.53
Branch： branch04
commit description：a2.53（携程网首页案例——完成搜索栏右边模块）

tag：a2.53


输入框里的放大镜，也可作为该div的before伪类即可，依然在精灵图中。

image-20201223200703726

.search::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
}

image-20201223201352911

使用固定定位或者外边距调整位置。

.search::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    margin: 5px;
}

image-20201223201520956

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.54
Branch： branch04
commit description：a2.54（携程网首页案例——完成搜索栏中的放大镜图标）

tag：a2.54


插入文字。

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

伪类插入的是块级元素，把字体给挤下来了。

image-20201223215317078

伪类中使用绝对定位即可，注意此时的margin值就会失效，因此使用偏移量即可。

同时注意，绝对定位跟随父亲，父级search设置为相对定位即可。

.search {
    position: relative;
    height: 26px;
    border: 1px solid #ccc;
    flex: 1;
    margin: 6px 10px;
    border-redius: 5px;
}

.search::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
}

image-20201223215748434

设置文字样式，垂直居中，同时设置左内边距。

=>

.search {
    position: relative;
    height: 26px;
    line-height: 26px;
    border: 1px solid #ccc;
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 6px 10px;
    padding-left: 25px;
    border-redius: 5px;
}

文字还是有点偏下。

image-20201223220052403

在css3中是把内边距和边框算入的。

image-20201223220311850

实际需要的行高，是排除边框的距离，所以设置为24px才对。

image-20201223220218046

.search {
    position: relative;
    height: 26px;
    line-height: 24px;
    border: 1px solid #ccc;
    flex: 1;
    font-size: 12px;
    color: #666;
    margin: 6px 10px;
    padding-left: 25px;
    border-redius: 5px;
}

image-20201223220424875

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.55
Branch： branch04
commit description：a2.55（携程网首页案例——搜索栏中的输入框）

tag：a2.55


设置输入框下的阴影部分。

box-shadow: 0 2px 4px rgba(0,0,0,.2);

image-20201223230043480

设置盒子的背景颜色。

大盒子 => background-color: #F6F6F6;

上下边框 =>

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

这里还需要把字往上调高一些。

image-20201223230710185

margin: 4px auto -2px;

image-20201223230908446

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.56
Branch： branch04
commit description：a2.56（携程网首页案例——完成第一行）

tag：a2.56


2.2 focus

    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

image-20201224095732722

调整图标尺寸与父级一致。

.focus img{
    width: 100%;
}

因为上一栏是固定定位就会把下一栏盖住一部分，下一栏的盒子是标准流。给其加上内边距即可。

image-20201224095927657

.focus {
    padding-top: 44px;
}

image-20201224100143477

轮播图一般都会借助第三方组件，如果自己写需要用原生js，稍许麻烦，这里暂时不实现动态效果了。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.57
Branch： branch04
commit description：a2.57（携程网首页案例——完成第二行静态轮播图）

tag：a2.57


2.3 local-nav

image-20201224100606212

先用一个大盒子，里面包裹5个小盒子，分成五等份即可。

可以使用ul和li包裹，li中放入a标签，a中放入一个图标和文字。

背景是白色，盒子是带小圆角的，并且上下都有间距。

image-20201224100847421

    <!--局部导航栏-->
    <ul class="local-nav">

    </ul>

.local-nav {
    height: 64px;
    background-color: #fff;
    margin: 3px 4px;
    border-radius: 8px;
}

image-20201224101310988

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.58
Branch： branch04
commit description：a2.58（携程网首页案例——局部导航栏外部盒子布局）

tag：a2.58


    <ul class="local-nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

因为是标准流，所以仍然是竖着排布。

image-20201224101532750

使用flex布局，给其父级添加flex布局即可。

子级各占一份。

.local-nav li {
    flex: 1;
}

ul下的里去掉小点，去除默认边距。

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

image-20201224101919999

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.59
Branch： branch04
commit description：a2.59（携程网首页案例——局部导航栏布局）

tag：a2.59


li中放入a标签，a中放入一个图标和文字。

a中上面放入span，指定一个背景图片，下方放入一个span，放入文字。

使用flex布局。

image-20200819225120881

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

image-20201224111906541

.local-nav a {
    display: flex;
}

.local-nav-icon {
    width: 32px;
    height: 32px;
    background-color: pink;
}

image-20201224112246923

默认主轴是x轴，将主轴设置为y轴，把侧周设置为居中对齐。

.local-nav a {
    display: flex;
    flex-direction: column;
}

image-20201224112412345

.local-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

image-20201224112533873

设置上外边距，注意在flex布局，不会出现外边距合并的问题。

.local-nav-icon {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 8px;
}

image-20201224112804651

背景图片是精灵图，依然是二倍图。

.local-nav-icon {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

image-20201224113147298

修改文字颜色，因为所有的a标签中字体都是一个颜色，可以统一固定字体颜色。

a {
    text-decoration: none;
    color: #222;
}

image-20201224113320283

修改字体大小。

.local-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

image-20201224113416971

鼠标停留，会有提示信息，实际就是a标签中的title属性。

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

image-20201224113631007

复制粘贴五份，其余类似。

image-20201224113805275

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.60
Branch： branch04
commit description：a2.60（携程网首页案例——完成第三行局部导航栏）

tag：a2.60


如何快速设置不同图标呢？因为span之间也不是亲兄弟的关系，所以无法使用结构为类选择器，只能用属性选择器。

    <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>

虽然类名不同，但是都是以local-nav-icon开头的，因此可以这么写。

先利用类名开头设置公共的样式，再根据具体每个span的类名设置精灵图坐标即可，这样减少了代码的冗余，否则全部用类名写，代码很冗余。或者使用两个类名等等。

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    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-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;
}

image-20201224115145063

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.61
Branch： branch04
commit description：a2.61（携程网首页案例——局部导航栏快速更换图标）

tag：a2.61


2.4 nav

主导航栏 => 大盒子里包含三行，每一行再分三列，后面两列细分上下两行。

大盒子用nav，小盒子用div。

image-20201224134103334

宽度不用给，左右下（上：上一个盒子设置过了）设置margin，高度小盒子撑开即可，设置小圆角。

nav {
    border-radius: 8px;
    margin: 0 4px 3px;
}

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

.nav-common {
    height: 88px;
    background-color: pink;
}

image-20201224135019723

每行的盒子还需设置距离 =>

给中间的盒子设置上下边距，或者前两个盒子都设置下边距。

.nav-common:nth-child(2) {
    margin: 3px 0;
}

发现小圆角没有出现，那是因为div没有设置，它把父容器盖住了，给其设置overflow: hidden;，切去多余的小圆角即可。

image-20201224135331339

nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

image-20201224135550435

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.62
Branch： branch04
commit description：a2.62（携程网首页案例——第四行主导航整体布局）

tag：a2.62


每一行再分三等分，准备三个div。

    <!--主导航栏-->
    <nav>
        <div class="nav-common">
            <div class="nav-items">a</div>
            <div class="nav-items">b</div>
            <div class="nav-items">c</div>
        </div>
        <div class="nav-common">2</div>
        <div class="nav-common">3</div>
    </nav>

紧接着使用flex布局，每一列各占一份。

image-20201224140045824

.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
}

.nav-items {
    flex: 1;
}

image-20201224140431714

每列需要小竖线隔开，设置div的边框就行了。

前两个div设置边框即可。因为设置了div边框，但采用的是css3的盒子模型，所以这个盒子不受影响，也不会掉下去。

.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}

image-20201224140900082

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.63
Branch： branch04
commit description：a2.63（携程网首页案例——第四行主导航子盒子布局）

tag：a2.63


div中放入a标签作为单列每行

    <nav>
        <div class="nav-common">
            <div class="nav-items">a</div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">c</div>
        </div>
        <div class="nav-common">2</div>
        <div class="nav-common">3</div>
    </nav>

image-20201224171443718

使用flex布局进行排布 =>

.nav-items {
    flex: 1;
    display: flex;
}

.nav-items a {
    flex: 1;
}

image-20201224171714498

修改主轴为y轴

.nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
}

image-20201224171833383

设置水平居中和垂直居中 =>

.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
}

image-20201224172019802

设置字体样式，及边框。

.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
}

.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}

image-20201224172323100

设置文字阴影效果 =>

.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);
}

image-20201224172547394

补充结构 =>

    <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">2</div>
        <div class="nav-common">3</div>
    </nav>

由于第一列设置了下边框，所有有点高，不对齐。

image-20201224172739059

如下第一个语句设置第一个a的下边框，因此第一列下方去除下边框。

.nav-items a:nth-child(1) {
    border-bottom: 1px solid #fff;
}

.nav-items:nth-child(1) a {
    border: 0;
}

image-20201224173640449

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.64
Branch： branch04
commit description：a2.64（携程网首页案例——第四行主导航填充内容）

tag：a2.64


第一列下方需要填充背景图标，是三倍图，进行缩放。

image-20201224174538729

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

image-20201224174755345

图片需要靠底端对齐，水平居中。

background: url(../images/hotel.png) no-repeat bottom center;

image-20201224182413036

复制粘贴，剩下的结构一样。

image-20201224182556878

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.65
Branch： branch04
commit description：a2.65（携程网首页案例——完成第四行整个布局）

tag：a2.65


背景颜色渐变，css3新增属性。 => 从一种颜色逐渐变为另一种颜色。

背景渐变必须添加浏览器私有前缀

起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top

image-20201224183207532

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 200px;
             background: -webkit-linear-gradient(left, red, blue);
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

image-20201224184128987

起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top，即从上往下。

background: -webkit-linear-gradient(red, blue);

image-20201224184348184

从左上角开始渐变。

background: -webkit-linear-gradient(top left, red, blue);

image-20201224184504098

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.66
Branch： branch04
commit description：a2.66（背景颜色渐变示例）

tag：a2.66


完成渐变色

.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>
        <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>

.nav-items:nth-child(1) a {
    border: 0;
}

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

.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(../images/plane.png) no-repeat bottom center;
    background-size: 81px auto;
}

.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(../images/travel.png) no-repeat bottom center;
    background-size: 94px auto;
}

image-20201224214349653

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.67
Branch： branch04
commit description：a2.67（携程网首页案例——完成第四行样式）

tag：a2.67


2.5 subnav-entry

image-20201224214800169

使用ul和li

    <!-- 侧导航栏 -->
    <ul class="subnav-entry">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

设置圆角及背景色

.subnav-entry {
    border-radius: 8px;
    background-color: #fff;
}

image-20201224220309135

需要设置左右的外边距 => margin: 0 4px;

同时body设置高度大一些，否则看不到底部了。 => height: 2000px;

image-20201224221126799

引入flex布局，每个li占一份

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
}

.subnav-entry li {
    flex: 1;
}

image-20201224221756048

这里每行是五个，需要设置换行。 => flex-wrap: wrap;

但是依然没有换行。

image-20201224221756048

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.68
Branch： branch04
commit description：a2.68（携程网首页案例——第五行整体外布局）

tag：a2.68


因为10个li并没有设置宽度，flex除了设置1之外，还可以设置为百分比。

.subnav-entry li {
    flex: 20%;
}

image-20201224222402303

没有设置高度，实际高度可以根据内容撑开。

紧接着li中放入a，a中放入上下两个盒子即可，上边是图标，下边是文字。

        <li>
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <spa>WIFI电话卡</spa>
            </a>
        </li>

.subnav-entry a {
    display: flex;
}

.subnav-entry-icon {
    width: 28px;
    height: 28px;
    background-color: pink;
}

image-20201224223207989

设置主轴为y轴，侧周居中。

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

image-20201224223538029

设置上边距及背景图标。

.subnav-entry-icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}

image-20201224224044351

再完善其他部分。

   <ul class="subnav-entry">
        <!--li{$}*10-->
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon1"></span>
                <spa>WIFI电话卡</spa>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon2"></span>
                <span>保险·签证</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon3"></span>
                <span>外币兑换</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon4"></span>
                <span>购物</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon5"></span>
                <span>当地向导</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon6"></span>
                <span>自由行</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon7"></span>
                <span>境外玩乐</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon8"></span>
                <span>礼品卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon9"></span>
                <span>信用卡</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="subnav-entry-icon-icon10"></span>
                <span>更多</span>
            </a>
        </li>
    </ul>

这里和local-nav一样，使用属性选择器。

.subnav-entry li [class^="subnav-entry-icon"] {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}

.subnav-entry li .subnav-entry-icon-icon2 {
    background-position: 0 -32px;
}

.subnav-entry li .subnav-entry-icon-icon3 {
    background-position: 0 -64px;
}

.subnav-entry li .subnav-entry-icon-icon4 {
    background-position: 0 -320px;
}

.subnav-entry li .subnav-entry-icon-icon5 {
    background-position: 0 -96px;
}

.subnav-entry li .subnav-entry-icon-icon6 {
    background-position: 0 -160px;
}

.subnav-entry li .subnav-entry-icon-icon7 {
    background-position: 0 -192px;
}

.subnav-entry li .subnav-entry-icon-icon8 {
    background-position: 0 -128px;
}

.subnav-entry li .subnav-entry-icon-icon9 {
    background-position: 0 -224px;
}

.subnav-entry li .subnav-entry-icon-icon10 {
    background-position: 0 -288px;
}

image-20201224230056244

距离还是有些，可以设置上下内边距 =>

.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    flex-wrap: wrap;
    padding: 5px 0;
}

image-20201224230425932

修改精灵图，上述图标有些问题。

.subnav-entry li [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 li .subnav-entry-icon-icon2 {
    background-position: 0 -28px;
}

.subnav-entry li .subnav-entry-icon-icon3 {
    background-position: 0 -56px;
}

.subnav-entry li .subnav-entry-icon-icon4 {
    background-position: 0 -84px;
}

.subnav-entry li .subnav-entry-icon-icon5 {
    background-position: 0 -112px;
}

.subnav-entry li .subnav-entry-icon-icon6 {
    background-position: 0 -139px;
}

.subnav-entry li .subnav-entry-icon-icon7 {
    background-position: 0 -168px;
}

.subnav-entry li .subnav-entry-icon-icon8 {
    background-position: 0 -196px;
}

.subnav-entry li .subnav-entry-icon-icon9 {
    background-position: 0 -224px;
}

.subnav-entry li .subnav-entry-icon-icon10 {
    background-position: 0 -252px;
}

image-20201224235006583

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.69
Branch： branch04
commit description：a2.69（携程网首页案例——完成第五行样式）

tag：a2.69


2.6 sales

image-20201225093855626

整体划分出一个盒子，再通过上下细分两个子盒子。

    <!--sales-->
    <div class="sales-box">
        123
    </div>

.sales-box {
    border-top: 1px solid #ccc;
    background-color: #fff;
}

image-20201225094917491

设置边距，四个方向 => margin: 4px;

image-20201225095021563

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.70
Branch： branch04
commit description：a2.70（携程网首页案例——第六行外部大盒子布局）

tag：a2.70


先完成头部hd部分样式

    <div class="sales-box">
        <div class="sales-hd">

        </div>
    </div>

.sales-hd {
    height: 44px;
    border-bottom: 1px solid #ccc;
}

image-20201225095527409

左侧是一个图片，用h2标签，里面也将图片文字内容加入，这里主要方便搜索引擎搜索， 右侧用a标签可以点击，再放入图片。

    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#">更多</a>
        </div>
    </div>

image-20201225100009031

h2中的文字是不需要显示的，使它隐藏。

.sales-hd h2 {
    text-indent: -999px;
    overflow: hidden;
}

image-20201225100343698

用伪元素设置背景图片，因为是行内元素是看不到的，使用绝对定位即可。

.sales-hd h2 {
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    position: absolute;
    top: 8px;
    left: 20px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

image-20201225101017146

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.71
Branch： branch04
commit description：a2.71（携程网首页案例——第六行热门活动图标）

tag：a2.71


右侧也使用定位偏移到右边 =>

    <div class="sales-box">
        <div class="sales-hd">
            <h2>热门活动</h2>
            <a href="#" class="more">获取更多福利</a>
        </div>
    </div>

.sales-hd {
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}

.more {
    position: absolute;
    right: 5px;
    top: 8px;
}

image-20201225113235054

指定背景并渐变，并设置圆角。

.more {
    position: absolute;
    right: 5px;
    top: 8px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
}

image-20201225113417423

两边有点近，使用padding挤开，并设置字体颜色 =>

右边要大些，因为要放箭头。

.more {
    position: absolute;
    right: 5px;
    top: 8px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

image-20201225113634601

箭头使用伪元素即可 =>

使用上边框和右边框，然后旋转即可

image-20201225113743948

image-20201225113823370

.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);
}

image-20201225113852820

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.72
Branch： branch04
commit description：a2.72（携程网首页案例——第六行获取更多福利按钮）

tag：a2.72


这里实际都是大图片，所有外层一个容器，里面是三行两列，即两等份即可。使用div当做容器，最里面使用a标签里插入背景图即可。

在这里插入图片描述

    <!--sales-->
    <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>

图片都太大了！

image-20201225114531191

设置flex布局

.row {
    display: flex;
}

.row a {
    flex:1;
}

.row a img {
    width: 100%;
}

image-20201225115147074

a下是有底边框的

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

image-20201225115400539

第一列盒子设置右边框

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

image-20201225115521873

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.73
Branch： branch04
commit description：a2.73（携程网首页案例——完成第6行样式）

tag：a2.73




（后续待补充）
溜_x_i_a_o_迪
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
携程网首页案例（flex布局）
yexiangCSDN的专栏
05-10 1152
一、携程网首页案例 访问地址：m.ctrip.com
携程网首页主要利用flex布局实现
05-02
利用flex布局完成了对携程网首页的制作，主要是flex为主，其他为辅的一个源代码分享给大家，希望可以对大家有帮助
flex布局的应用 —— 模仿携程移动端的首页
爱前端的程序媛的博客
03-26 2650
写在前面 昨天已经过去，未来还未到来，所以当下是上天给的最好的恩赐，好好把握。 昨天又很仔细的看了看flex布局，今天下午动手用flex布局做了一个练习，就是模仿携程移动端首页。有一段时间没写html和css了，今天就是使用纯html和css搭建的一个首页，没有用到js。不过页面中确实有一个点可以用js做比较轻松，就是可以使用循环来生成精灵图，因为今天想写样式了，就没有用js写，下次再用js写...
移动WEB开发之flex布局--携程网首页案例制作
薛定谔的猫
11-30 800
做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size。起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top。方案：我们采取单独制作移动页面方案。要设置为主轴为y轴,侧轴居中。背景渐变必须添加浏览器私有前缀。技术：布局采取flex布局。利用属性选择器更换背景图片。sales-bd模块制作。第一个a要取消下边框。
移动WEB开发 之 flex布局----携程网移动端首页案例
不爱吃菜的菜菜的博客
05-11 2125
前端学习用flex布局来写携程首页（因为携程和老师讲的版本不一样，我就用了很多关于现在携程的图片来替代）
新手尝试制作小米首页
logic51551的博客
03-04 487
Document 应对疫情小米服务业务调整通知 小米商城 MIUI IoT 云服务 金融 ...
携程网移动端flex布局案例
05-16
总结起来，"携程网移动端flex布局案例"涵盖了前端开发中的多项关键技术，包括Flex布局的运用，CSS3样式的深入，以及性能优化技巧如精灵图和渐变色。通过这些技术的组合，开发者能够创建出既美观又适应性强的移动网页...
css3 flex布局实现平均分配元素的示例代码
11-20
本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下： 例子一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex ...
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目(伸缩项目)扩展来填满可用空间，或缩小它们以防止溢出容器。 任何...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
携程首页（flex布局-移动端）
03-08
flex布局练习
CSS3仿携程旅行网404页面代码.zip
07-04
CSS3仿携程旅行网404页面代码是一款基于CSS3结合图片实现的动态背景页面模板。
移动WEB开发之flex布局-携程网案例
qq_46199553的博客
09-09 559
1.1 传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局。 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 传统布局  兼容性好  布局繁琐  局限性，不能再移动端很好的布局 flex 弹性布局  操作方便，布局极为简单，移动端应用很广泛  PC 端浏览器支持情况较差  IE 11或更低版本，不支持或仅部分支持 2.1 布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器
【CSS】flex实战 - 移动版携程网首页制作 - CSS3 - flex布局
YK菌的博客
08-07 671
flex实战
使用 flex布局 制作携程网首页
保持清醒
12-13 607
1. 技术选型 2. 搭建相关文件夹结构 3. 引入视口标签以及初始化样式 4. 常用初始化样式 5. 首页布局分析以及搜索模块布局 index.css /*搜索模块*/ .search-index{ /*固定定位跟父级没有关系，它以屏幕为准*/ position: fixed; top: 0; left: 50%; /*固定的盒子应该有宽度*/ -webkit-transform: translateX(-50%); transform: ..
仿携程首页项目的静态页面布局项目
梨子社区
12-28 2161
布局实现思路项目https://m.ctrip.com/html5/ 1.从总体布局分析 body{ max-width:540px; min-width:320px; margin: 0 auto; font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana,"Microsoft Yahei",STXihei, ...
flex布局携程网案列
weixin_42378409的博客
04-03 430
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
使用Flex布局实现携程APP首页布局
Lucivita的博客
01-19 1728
一、整体分析 这次作业主要是使用flex布局完成携程的手机界面，大体我认为可以分为六部分 二、具体样式实现 1、全局样式设置 导入normalize.css并设置一下body 2、搜索栏 <div class="short-search"> <div class="search"> <p>搜索:目的地/酒店/景点/航班号</p> </div> &.
移动开发—详解flex布局之携程网首页案例制作
道阻且长，行则将至。
05-18 1058
移动开发—详解flex布局之携程网首页案例制作 学习内容 一、flex的布局原理 二、flex布局父项常见的属性 三、flex布局子项常见的属性 四、携程网首页案例制作 一、flex的布局原理 总结flex布局的原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列顺序 二、flex布局父项常见的属性 （一）、flex-direction设置主轴的方向 主轴与侧轴 在flex中，是分为主轴和侧轴两个方向：同样的叫法有：行和列、x轴和y轴 默认主轴方向就是x轴方向，水平向右 默认侧轴方向就是y轴
在vue3.js中如何使用flex写垂直布局
最新发布
02-18
Vue 3.0 使用了更强大的 CSS Flexbox 布局系统，您可以通过为根元素添加 display: flex 属性，然后为子元素添加 flex-direction: column 属性来实现垂直布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值