移动端布局学习之flex布局

其他 2020-02-10 21:01:12 阅读次数: 0

1. flex 布局体验

传统布局:

兼容性好 布局繁琐 局限性，不能在移动端很好的布局。

flex 弹性布局:

操作方便 布局极为简单 移动端应用很广泛

PC端浏览器支持情况较差

IE 11或更低版本 不支持或仅部分支持。

建议:

如果是PC端页面布局 我们还是选择传统布局

如果是移动端或者不考虑兼容性问题的PC端布局页面 我们还是使用flex弹性布局.

布局体验:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            /* 加上这句话后 span 可以接受宽高 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

2.flex 布局原理

flex 是flexible Box的缩写 意为 '弹性布局' 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局。

当我们为父盒子设为flex布局以后，子元素的float clear 和 vertical-align属性将失效

伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局.

采用Flex布局的元素 称为Flex容器(flex container) 简称“容器” 她的所有子元素自动成为容器成员，称为Flex项目(flex item)简称项目

通过给父盒子添加Flex属性 来控制盒子的位置和排列方式.

3 flex布局父项的常见属性

>1 flex-direction :设置主轴的方向

>2 jusitify-content: 设置主轴上的子元素的排列方式

>3 flex-wrap: 设置子元素是否换行

>4 align-content:设置侧轴上的子元素的排列方式(多行)

>5 align-items:设置侧轴上子元素的排列方式(单行)

>6 flex-flow:复合属性 相当于同时设置了Flex-direction和flex-wrap

3.1 flex-direction设置主轴的方向

3.1.1 主轴与侧轴

在flex布局中，是分为主轴与侧轴两个方向，同样的叫法有:行和列 X轴与Y轴

默认的主轴方向就是X轴方向，水平方右

默认的侧轴方向就是Y轴方向，水平向下

需要注意的是 主轴和侧轴是可以变换的。

flex-direction: 属性决定主轴的方向(即项目的排列方向)

所以 flex-direction的属性决定了谁是主轴，剩下的就是侧轴，而我们的子元素是跟着主轴的排列的。

flex-direction 属性值

row: 默认值 从左到右

row-reverse: 从右到左

column: 从上到下

column-reverse: 从下到上

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 给父级添加flexs属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴 是X轴 从左到右 那么Y轴就是侧轴*/
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 从右向左 里面的项目也是从右向左的*/
            /* flex-direction: row-reverse; */
            /* 设置Y轴为主轴方向 从上到下 */
            /* flex-direction: column; */
            /* 设置Y轴为主轴方向 从下到上 */
            flex-direction: column-reverse;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>

</html>

3.2 justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式。

注意:在使用这个属性之前一定要确定好主轴是哪个.

属性值

justify-content:flex-start 默认值 从头部开始 如果主轴是X轴 则从左到右

justify-content:flex-end 从尾部开始排列.

justify-content:center 在主轴居中对齐(如果主轴 是X轴则水平居中)

justify-content:space-around 平分剩余控件

justify-content:space-between: 先从两边贴边 再平分剩余空间(重要)

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            display: flex;
            width: 800px;
            height: 600px;
            background-color: pink;
            /* 默认的 */
            flex-direction: row;
            /* 默认值 flex-start 默认 如果主轴是X轴从左到右 是Y轴则从上到下*/
            /* justify-content: flex-start; */
            /* 如果主轴是X轴 则从右到左 是Y轴 则从下到上 */
            /* justify-content: flex-end; */
            /* 在主轴居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边 再平均分配剩余空间 */
            /* justify-content: space-between; */
            /* 平均分配空间 */
            justify-content: space-evenly;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>

</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>


</html>

3.3 flex-wrap 子元素是否换行

在Flex布局中，默认情况下，项目都排在一条线(又称轴线)上，排放不下会改变大小自适应。flex布局默认是不换行的。但是通过flex-wrap属性定义，可以改变这一情况。

代码示例: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            justify-content: flex-start;
            /* 默认 nowrap 不换行 */
            /* flex-wrap: nowrap; */
            /* 换行 */
            /* flex-wrap: wrap; */
            /* 换行 如果主轴是X轴 行会翻转(每行的醒目不会翻转) */
            /* flex-wrap: wrap-reverse; */
        }

        div span {
            width: 150px;
            height: 100px;
            margin: 10px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>10</span>
        <span>20</span>
        <span>30</span>
        <span>40</span>
        <span>50</span>
    </div>
</body>

</html>

3.4 align-items 设置侧轴上的子元素的排列方式(单行)

主要属性值:

align-items:flex-start 默认值 从上到下

align-items:flex-end 从下到上

align-items:center 挤在一起居中(垂直居中)

align-items:stretch 拉伸

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴 其实不用谢 */
            flex-direction: row;
            /* 主轴居中 */
            justify-content: center;
            /* 设置侧轴居中 */
            align-items: center;
            /* 在X轴为主轴的情况下 侧轴从上到下 */
            /* align-items: flex-start; */
            /* 在X轴为主轴的情况下 从下到上 */
            /* align-items: flex-end; */
            /* 拉伸 但是子盒子不要有高度  会和父亲一样高*/
            /* align-items: stretch; */

        }

        div span {
            width: 150px;
            /* 为了配合align-items:stretch */
            /* height: 100px; */
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

需要注意的是:

这个属性 只适合 在侧轴上的排列方式子项为单行的时候使用，如果有多行则这个属性没用。

3.5 align-content 设置侧轴上子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行(多行)的情况。在单行下是没有效果的。

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            /* 因为有了换行 此时我们侧轴上控制子元素的对齐方式我们要使用align-content 
            align-items 失去了作用 */
            flex-wrap: wrap;
            /* 主轴为X轴 子项从上向下排列 */
            /* align-content: flex-start; */
            /* 主轴为X轴 子项整体居中 */
            /* align-content: center; */
            /* 上下两行贴边 中间距离平分 */
            /* align-content: space-between; */
            /* 平分剩余的空间 */
            align-content: space-around;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>

    </div>
</body>

</html>

3.6 align-content 和 align-items 的区别

align-items 适用于单行情况下 只有上对齐 下对齐 居中 和 拉伸

align-content 适用于换行(多行)的情况下(单行情况下无效) 可以设置 上对齐 下对齐 居中 拉伸 已经平均分配剩余

空间等属性值。

总结就是单行找align-items 多行找align-content。

3.7 flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap属性的复合属性.

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 组合写法  设置主轴和是否换行*/
            flex-flow: column wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            /* margin: 0 10px; */
        }
    </style>
</head>

<body>

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

4 flex 布局中子项的常见属性

flex 子项占有的份数

flex-self 控制子项自己在侧轴的排列方式

order 属性定义子项的排列顺序(前后顺序)

4.1 flex属性

flex 属性定义子项目分配剩余空间 用flex来表示占多少份数。

语法:

number 默认为0

.item {
    flex:<number>;   
}

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            /* 3个孩子各占一份空间 剩余的空间分成一份 留给2号盒子 */
            flex: 1;
            background-color: green;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 10px auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(1) {
            background-color: greenyellow;
        }

        p span:nth-child(2) {
            background-color: skyblue;
        }

        p span:nth-child(3) {
            background-color: teal;
        }
    </style>
</head>

<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

4.2 flex-self 控制子项自己在侧轴上的排列方式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* align-items: flex-end; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(3) {
            /* 控制自己在侧轴上的排列方式*/
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

4.3 order 属性定义项目的排列顺序

数值越小 排列越靠前 默认为0  和z-index不一样，他是越大越靠上。

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* align-items: flex-end; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(3) {
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

携程网首页案例(部分)制作:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程在手,说走就走</title>
    <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="#">
                    <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 {
    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;
}
img {
    vertical-align: middle;
}
a {
    text-decoration: none;
    color: #222;
}
/* 搜索模块 */
.search-index {
    display: flex;
    /* 固定定位跟父亲没有关系 以可视屏幕为准 */
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 兼容老版本 */
    -webkit-transform: translateX(-50%);
    min-width: 320px;
    max-width: 540px;
    width: 100%;
    height: 44px;
    background-color: #f6f6f6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
div {
    box-sizing: border-box;
}

.user {
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 12px;
    color: #3eaae0;
}
/* 2倍精灵图的做法 */
/* 1.在Firework里面 把精灵图等比例缩小为原来的一半 */
/* 2.之后根据大小测量坐标 */
/* 3.注意代码里面background-size也要写 精灵图为原来宽度的一半 */
.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;
}
.search {
    position: relative;
    flex: 1;
    height: 26px;
    font-size: 12px;
    border: 1px solid #ccc;
    line-height: 24px;
    margin: auto 10px;
    border-radius: 5px;
    padding-left: 25px;
    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
}

.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;
}
.focus {
    margin-top: 44px;
}
.focus img {
    width: 100%;
}
/* 局部导航栏 */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.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;
    flex-direction: column;
    /* 侧轴居中对齐 单行 */
    align-items: center;
    font-size: 12px;
}

.local-nav li [class^=local-nav-icon] {
    width: 32px;
    height: 32px;
    background-color: pink;
    margin-top: 7px;
    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 {
    border-radius: 8px;
    margin: 0 4px 3px;
    overflow: hidden;
}
.nav-common {
    display: flex;
    height: 88px;
}
.nav-common:nth-child(1) {
    /* 线性渐变 */
    /* background: linear-gradient(起始方向,颜色1,颜色2); */
    /* background: -webkit-liner-gradient(left，red,blue); */
    /* 必须添加浏览器的私有前缀 */
    /* 起始方向可以是:方位名词 或者度数 如果省略默认就是top */
    background: -webkit-linear-gradient(left,#fa5a55,#fa994d);
}
.nav-common:nth-child(2) {
    margin: 3px 0;
    background: -webkit-linear-gradient(left,#4b90ed,#53bced);
}

.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left,#34c2a9,#6cd559);
}

.nav-items {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}
.nav-items a {
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    flex: 1;
    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: none;
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto ;
}

/* 侧边导航栏 */
.subnav-entry {
    display: flex;
    border-radius: 8px;
    background-color: #fff;
    margin: 0 4px;
    flex-wrap: wrap;
    padding: 5px 0px;
}

.subnav-entry li {
    /* 里面的子盒子 可以写百分号 相对于父级来说的 */
    flex: 20%;
}
.subnav-entry li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}
.subnav-entry li [class^=subnav-entry-icon] {
    width: 28px;
    height: 28px;
    background-color: pink;
    margin-top: 7px;
    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;
}

/* 销售模块 */
.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: 4px;
    left: 4px;
    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;
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    font-size: 14px;
    color: #fff;
    background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
}

.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 #e8e8e8;
}
.row a img {
    width: 100%;
}

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

猜你喜欢

转载自www.cnblogs.com/huanying2000/p/12268374.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022