HTML基础--CSS3（一）

孤影&碧空

已于 2022-08-09 00:44:27 修改

阅读量584

点赞数 1

文章标签： css3 html css 前端 vscode

于 2022-08-09 00:30:48 首次发布

本文链接：https://blog.csdn.net/m0_50315078/article/details/126239088

版权

1.层级选择器

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*   >  表示亲儿子选择器 */
        .box>li {
            border: 1px solid red;
        }

        /* + 表示当前元素的后面第一个兄弟 */
        .child+li {
            /* background-color: yellow; */
            font-size: 27px;
        }

        /*  ~ 表示当前元素后面的所有亲兄弟 */

        .child~li {
            background-color: blue;
        }

        .container+p {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1111111
            <ul>
                <li>1111</li>
                <li>22222</li>
                <li>3333</li>
            </ul>
        </li>
        <li class="child">222222</li>
        <li>333333333</li>
        <li>4444444444444</li>
        <li>55555555555</li>
    </ul>

    <div class="container">container-111111111</div>
    <p>p-1111111</p>
    <p>p-222222</p>
    <div>
        <p>333333</p>
    </div>
</body>

2.属性选择器

1.E[attr]:只使用属性名，但没有确定任何属性值；

2.E[attr=“value”]:指定了属性名，并且制定了该属性的属性值；

3.E[attr~=“value”]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的“~”不能不写

扩展延伸

4.E[attr^=“value”]:指定了属性名，并且有属性值，属性值是以value开头的；

5.E[attr$=“value”];指定了属性名，并且有属性值，而且属性值是以value结束的;

6.E[attr*=“value”]:制定了属性名，并且有属性值，而且属性值中包含了value;

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 属性选择器 */
        [class] {
            background-color: red;
        }

        /* div.box1 {
            font-size: 27px;
        } */

        /* 这里不能写空格，表示div标签下的具有class属性 */
        div[class] {
            font-size: 47px;
        }

        /* 这种是完全匹配，当元素不止这一个class时，便不会生效 ~= 才是包含匹配，只要包含就会应用 */
        div[class=box1] {
            background-color: yellow;
        }

        input[type="email"] {
            background-color: blue;
        }

        /* 模糊匹配 */
        [class*="o"] {
            color: green;
            border: 1px solid purple;
        }
    </style>
</head>

<body>
    <div class="box1">div-11111</div>
    <div class="box2">div-22222</div>
    <div>div-333</div>
    <p class="p1">p1-111111</p>
    <p class="box1">p-class=box1----111</p>
    <p class="p2">p-22222222</p>
    <p>p-333333333</p>


    <div>
        <h1>注册页面</h1>
        用户名：<input type="text" name="username"><br>
        密码：<input type="password" name="password"><br>
        年龄：<input type="number" name="age"><br>
        邮箱：<input type="email" name="email"><br>
    </div>
</body>

3.结构伪类选择器

①X:first0child匹配子集中第一个元素，IE7就可以支持

②X:last-child匹配父元素最后一个元素X

③X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

④X:only-child这个伪类一般使用较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不会匹配

⑤X:root匹配文档的根元素，在HTML（标准通用标记语言下的一个应用中），根元素永远是HTML

⑥X:empty匹配没有任何子元素（包括含文本、注释、空格等）的元素X

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 940px;
            height: 100px;
            margin: 0 auto;
            background-color: yellow;
            float: left;
        }

        .box div {
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
            margin-right: 20px;

        }
        /* .box .last {
            margin-right: 0;
        } */

        /* 伪类选择器代替.last */
        .box div:last-child {
            margin-right: 0px;
        }
    </style>
</head>

<body>
    <!-- 通过某种结构关系查找页面元素，
    比如：
    匹配某元素第一个子元素
    匹配某元素最后一个子元素 -->
    <div class="box">
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
</body>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* li:first-child {
            background-color: red;
        }

        li:last-child {
            background-color: yellow;
        } */

        /* 第几个,从1开始数 */
        /* li:nth-child(1),
        li:nth-child(5) {
            background-color: blue;
        } */

        /* 第几个，偶数 2n(even) 奇数 2n+1 或者 2n-1 或者 odd */
        li:nth-child(2n) {
            background-color: purple;
        }

        li:nth-child(odd) {
            background-color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            border: 1px solid black;
        }

        /* 只有拥有独生子女才会匹配 */
        div p:only-child {
            background-color: red;
        }

        /* 空div才会被选择，甚至不能有注释与空格 */
        div:empty {
            width: 100px;
            height: 100px;
            background: yellow;
            font-size: 47px;
        }

        /* 根选择器：root与html一模一样 */
        /* html, */
        :root,
        body {
            height: 100%;
            background-color: grey;
        }
    </style>
</head>

<body>
    <div>
        <p>11111</p>
        <p>222222</p>
    </div>
    <div>
        <p>11111</p>
    </div>
    <div></div>
    <div></div>
</body>

4.目标伪类选择器

E:target选择匹配E的所有元素，且匹配元素被相关URL指向

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            position: fixed;
            right: 0px;
            top: 100px
        }

        li {
            width: 270px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;

        }

        div {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
        }

        div:target {
            background-color: red;
        }

        /* 锚点作用：页面不同区域的跳转，使用a链接
        <a  href="#锚点名字"></a>
        <div id="锚点名字"></div> */
    </style>
</head>

<body>

    <ul>
        <li><a href="#a">哼啊啊啊啊</a></li>
        <li><a href="#b">达咩达咩</a></li>
        <li><a href="#c">never gonna let you down</a></li>
        <li><a href="#d">路还在闯，我还在创</a></li>
    </ul>

    <div id="a">
        哼啊啊啊啊
    </div>
    <div id="b">
        达咩达咩
    </div>
    <div id="c">
        never gonna let you down
    </div>
    <div id="d">
        路还在闯，我还在创
    </div>
</body>

手风琴效果

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.container {
            display: none;
        }

        div.container:target {
            display: block;
        }
    </style>
</head>

<body>
    <div>

        <a href="#aaa">aaa</a>
        <div id="aaa" class="container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis obcaecati
            autem blanditiis
            nostrum.
            Porro inventore enim hic accusantium error cum maiores similique tempora quisquam commodi, dolorem id eaque
            debitis eius.</div>
    </div>

    <div>
        <a href="#bbb">bbb</a>
        <div id="bbb" class="container">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta consectetur
            molestias nemo dolorum
            voluptatem corporis quos similique nam ea voluptatibus autem officia ratione, est quod atque commodi ab
            delectus aut?</div>
    </div>

    <div>
        <a href="#ccc">ccc</a>
        <div id="ccc" class="container">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque dicta
            laudantium alias omnis,
            minima enim
            officia temporibus ullam earum non, est accusantium voluptas, fugiat illum hic perspiciatis repudiandae
            eaque doloremque!</div>
    </div>
</body>

5.UI元素状态伪类选择器

指的是适用于表单中的元素选择器

E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked匹配所有用户界面（form表单）中处于选中状态的元素E

E:selection匹配E元素中被用户选中或者处于高亮状态的部分

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled {
            background-color: red;
        }

        input:disabled {
            background-color: grey;
        }

        /* 焦点 会匹配此选择器 */
        input:focus {
            background-color: yellow;
        }

        input[type=checkbox] {
            /* 去除默认样式 */
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }

        input:checked {
            background-color: blue;

        }
        div::selection {
            background-color: green;
        }
    </style>
</head>

<body>
    <form action="">
        用户名
        <input type="text" autofocus><br>
        密码
        <input type="password"><br>
        记住用户名
        <input type="checkbox"><br>

        <input type="submit" disabled>

    </form>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime excepturi explicabo fugiat velit amet possimus
        animi nisi voluptatibus laudantium cupiditate eius, voluptatum eveniet. Eaque alias ea temporibus optio dolor
        nesciunt?
    </div>
</body>

6.否定伪类选择器与动态伪类选择器

1.否定伪类选择器

E:not(s) (IE6浏览器不支持:not()选择器)

匹配所有不匹配简单选择符s的元素E

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:not(:first-child) {
            background-color: red;
        }

        div li:not(:nth-child(2n)) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>

2.动态伪类选择器

E:ink

链接伪类选择器，

而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上。

E:visited

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并且已经访问过。常用于链接锚点上。

E:active

用户行为选择器

选择匹配的E元素，且匹配元素被激活。常用语链接锚点和按钮上

E:hover

用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上，IE6及一下浏览器仅支持a:hover

7.文本阴影

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-shadow: 10px 10px 1px red, 1px -10px 8px yellow;
            /* 第一个参数指的是水平方向的位移
             第二个参数是垂直方向的位移，负数表示向左移动 
             第三个参数是模糊程度，数值越大表示越模糊 ，注意这里要带单位px
             第四个参数是阴影的颜色 
             一个元素中可以设置多个阴影，两个之间使用逗号隔开 */
        }
    </style>
</head>
<body>
    <div>大家好</div>
</body>

8.盒子阴影

box-shadow
属性值：

h-shadow	必需的。水平阴影的位置，允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选。阴影的大小
color	可选，阴影的颜色
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

Eg:box-shadow:10px 10px 5px #888

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: yellow;
            /* 如果有四个参数，第三个参数是模糊距离，第四个参数是模糊大小 */
            box-shadow: 10px 10px 10px black inset;
            /* inset是内阴影，如果不加一般就是外阴影 */
        }
    </style>
</head>
<body>
    <div></div>
</body>

9.圆角边框

原理：

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 0 auto;
            /* border-radius: 10px 200px; */
            /* 接受单位是0-50%width排序，或者百分比，大于这个都是○圆 */
            /* v1,四个角一样
            v1,v2左上右下，左下右上一致 
            v1 v2 v3左上，左下右上 ，右下
            v1 v2 v3 v4 顺时针
            */

            /* 设置单个方向： */
            border-top-left-radius: 10px;
            /* 30px/60px 水平垂直方向单独设置像素，但是这种写法不能支持单边设置
            	还可以这么写：border-radius:10px 20px 30px 40px/50px 60px 70px 80px代表顺时针方向的八个方位
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>

圆形与扇形

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            border-radius: 100px 100px 0 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 100px 0 0 0;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box"></div>
</body>

10.搜索框案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 935px;
            height: 120px;
            border: 1px solid #dedede;
            margin: 0 auto;
            background-color: #eceaeb;
            border-radius: 15px;
            box-shadow: 4px 11px 7px #bfbfbf, -4px 11px 7px #bfbfbf;
        }

        input[type=text] {
            width: 683px;
            height: 86px;
            margin-top: 17px;
            margin-left: 17px;
            border: 3px solid solid #ccc;
            border-radius: 3px;
            font-size: 25px;
            /* padding-left: 11px; */
            text-indent: 11px;
        }

        input[type=submit] {
            width: 200px;
            height: 89px;
            background-color: aqua;
            border-radius: 5px;
            font-size: 23px;
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="Search for CSS3 ,HTML5, jquery...">
        <input type="submit" value="GO">
    </div>
</body>

11.字体引入

字体模块：@font-face

@font-face是CSS3中的一个模块，他书要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）
@font-face的语法规则：
- @font-face{
- font-family:<YourWebFontName>;
- src:<source>[<format>][,<source>]*;
- [font-weight:<weight>]
- font-style:<style>
- }
@font-face语法说明：
- YourWebFontName指的是你自定义的字体名称，最好是使用你下载的默认字体，他才能被引用到你的Web元素中的font-family
- source:指的是你自定义的字体的存放路径，可以是相对路劲也可以是绝对路径

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 杜眷美简常规;

            src: url(../font/潮字社眷美简-闪\ 常规\(REEJI-CHAO-MeiGB-Flash-Regular\).ttf);
        }
        div {
            font-family: 杜眷美简常规;
            font-size: 100px;
            color: red;
            text-shadow: 5px 0px green;
        }
    </style>
</head>
<body>
    <div>赵钱孙李</div>
</body>

12.怪异盒模型

标准盒模型：

含义：更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改
属性box-sizing
- box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素
属性值content-box
- 这是由CSS2.1规定的宽高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

怪异盒模型：

属性值：border-box
为元素设定的宽度和高度决定了元素的边框盒
就是说，为元素指定的任何边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框盒内边距才能得到内容的宽度和高度。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 30px;
            border: 10px solid black;
            /* 标准盒模型 */
            box-sizing: content-box;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
            padding: 30px;
            border: 10px solid black;
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 900px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }

        .box div {
            width: 300px;
            height: 300px;
            text-align: center;
            padding: 10px;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae eaque, natus nam corporis quaerat, fugit
            ipsam illo in libero nulla cumque repellendus molestiae maxime perspiciatis. Ratione, itaque. Minus,
            molestiae reprehenderit?
        </div>
        <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus illum vero obcaecati ducimus ex iste
            corporis facere error nam, voluptate, reiciendis impedit dolorum, tenetur quia animi vitae saepe fugiat.
            Asperiores!
        </div>
        <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae repellat omnis voluptas et veritatis
            aspernatur sequi expedita minima, quia iste aliquam corrupti ab error fugit quae tempora numquam illo quasi.
        </div>
    </div>
</body>

13.弹性盒

是一种全新的布局方式，特别适合移动端布局

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            /* 显示方式为弹性盒 */
            /* 影响： */
            /* 1.子元素默认横向排列 */
            /* 2.行内元素变成了块级元素 */
            /* 3.只有一个元素的时候，加上margin:auto就会变成自动居中 */

            display: flex;
        }
        .box span {
            width: 50px;
            height: 50px;
            border: 1px dashed red;
            margin: auto;
        }
    </style>
</head>
<body>
    <!-- 弹性盒是一种全新的布局方式，特别适合移动端布局 -->
    <div class="box">
        <span>1111</span>
    </div>
</body>

1.修改主轴方向

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;
            flex-direction: column-reverse;
            /* row column  row-reverse column-reverse*/
        }

        .box span {
            width: 50px;
            height: 50px;
            border: 1px dashed red;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
    </div>
</body>

2.主轴侧轴对齐方向

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
            flex-direction: row;
            /* 调整主轴对齐方向 */
            justify-content: space-around;
            /* flex-start
            flex-end
            center 
            space-between两端对齐
            space-around环绕方式
            */

            /* 调整侧轴对齐方式 */
            align-items: flex-end;
            /*
            flex-start
            flex-end
            center
            不支持两端对齐与环绕对齐
            */
        }

        .box span {
            width: 50px;
            height: 50px;
            border: 1px dashed red;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
    </div>
</body>

3.折行

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
            align-items: flex-start;

            /* 折行 */
            flex-wrap: wrap;
            /* 调整折行之后的行间距 */
            align-content: center;

            /* flex-start
            flex-end
            center
            space-around
            space-between */
        }

        .box span {
            width: 100px;
            height: 100px;
            border: 1px dashed red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1111</span>
        <span>2222</span>
        <span>3333</span>
        <span>4444</span>
        <span>5555</span>
        <span>6666</span>
    </div>
</body>

京东部分案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 120px;
            border: 1px solid black;
            margin: 10px auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .box div {
            width: 60px;
            height: 60px;
            border: 1px dashed red;
            box-sizing: border-box;
            display: flex;
            align-items: center;

        }

        img {
            width: 40px;
            height: 40px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <img src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt="">
        </div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>


        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
        <div><img
                src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
                alt=""></div>
    </div>
</body>

4.内容的对齐方式


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 10px auto;
            display: flex;
        }

        .box div {
            width: 100px;

            border: 1px dashed red;
            box-sizing: border-box;
        }

        .box div:not(:nth-child(5)) {
            height: 100px;
        }

        .div1 {
            align-self: start;
        }

        .div2 {
            align-self: flex-end;
        }

        .div3 {
            align-self: center;
        }

        .div4 {
            align-self: baseline;
        }

        .div5 {
            /* 拉伸,当没有给他设置高度时,会拉伸到占满盒子 */
            align-self: stretch;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
        <div class="div4">4444</div>
        <div class="div5">5555</div>
    </div>
</body>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
        }

        .box div {
            /* width: 100px; */
            height: 100px;
            border: 1px dashed red;
            box-sizing: border-box;
        }

        .box div:not(:nth-child(5)) {
            /* height: 100px; */
            width: 100px;
        }

        .div1 {
            align-self: start;
        }

        .div2 {
            align-self: flex-end;
        }

        .div3 {
            align-self: center;
        }

        .div4 {
            align-self: baseline;
        }

        .div5 {
            /* 拉伸,当没有给他设置高度时,会拉伸到占满盒子,当主轴交换时，设置的内容相应转换 */
            align-self: stretch;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
        <div class="div4">4444</div>
        <div class="div5">5555</div>
    </div>
</body>

5.调整顺序

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            display: flex;
            flex-direction: row-reverse;
        }

        .box div {
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            box-sizing: border-box;
        }

        .div1 {
            order: 0;
            /* 默认值 */
        }

        .div2 {
            order: 1;
            /* 越大的值越后面 */
        }

        .div3 {
            order: -1;
            /* 可以设置成负数，权重更高 */
            /* 注意主轴方向 */
        }

        .div4 {
            order: -2;
        }

        .div5 {
            order: 7;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>
        <div class="div4">4444</div>
        <div class="div5">5555</div>
    </div>
</body>

6.剩余宽高

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            display: flex;

        }

        .box div {
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            box-sizing: border-box;
        }

        .div1 {
            flex: 1;
        }

        .div2 {
            /* 这句话的意思是占满剩余空间,这里的大小是份数,高度的话只要设置主轴 */
            flex: 3;
        }
        .div3 {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div1">1111</div>
        <div class="div2">2222</div>
        <div class="div3">3333</div>

    </div>
</body>

三栏布局-弹性盒

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        .box1,
        .box3 {
            width: 100px;
            background-color: grey;
        }

        .box2 {
            flex: 1;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

14.支付宝弹性盒布局案例

1.阿里巴巴矢量图标库

官网：https://www.iconfont.cn/

①在素材库中找到自己想要的素材，添加至购物车，然后一并添加到项目中，并下载到本地

②解压，打开index.html,使用中间的Font class方式

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../font-icon/font_3573520_vsa9jfmuv0c/iconfont.css">
    <title>Document</title>
    <style>
        span.icon-kabao {
            font-size: 100px;
        }
    </style>
</head>

<body>
    <span class="iconfont icon-kabao"></span>
</body>

2.写页面

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font-icon/font_3573520_gov0k2wzlya/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 955px;
            height: 1420px;
            margin: 0 auto;
            background-color: yellow;
            display: flex;
            flex-direction: column;
        }

        /* header设置 */
        header {
            height: 124px;
            background-color: #232939;
            display: flex;
            color: white;
        }

        /* header i[class^=icon-] {
            width: 118px;
            height: 124px;
            line-height: 124px;
            text-align: center;
            font-size: 48px;
        } */
        header i.font {
            width: 118px;
            height: 124px;
            line-height: 124px;
            text-align: center;
            font-size: 48px;

        }

        header span {
            font-size: 40px;
            flex: 1;
            height: 124px;
            line-height: 124px;
        }

        /* footer设置 */
        footer {
            height: 128px;
            background-color: white;
            display: flex;
        }

        footer div {
            display: flex;
            flex: 1;
            border: 1px solid #f4f5f9;
            flex-direction: column;
            justify-content: center;
            color: #acadaf;
        }

        footer div i {
            height: 66px;
            text-align: center;
        }

        footer div span {
            height: 36px;
            text-align: center;
            font-size: 28px;
        }
        .pict {
            font-size: 58px;
        }

        footer div.items:hover {
            color: green;
        }

        /* section设置 */
        section {
            flex: 1;
            background-color: #f4f5f9;
        }

        .main {
            display: flex;
            height: 278px;
            background-color: #232939;
            justify-content: space-around;
            align-items: center;
        }

        .main div {
            width: 120px;
            height: 168px;
            background-color: #232939;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: white;
        }

        .main div i {
            font-size: 110px;
            text-align: center;
        }

        .main div span {
            font-size: 32px;
            text-align: center;
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            background-color: white;
        }

        .list div {
            width: 25%;
            /* height: 33.3%; */
            height: 208px;
            border: 1px solid rgba(128, 128, 128, 0.24);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }

        .list div i {
            height: 77px;
            line-height: 77px;
            text-align: center;
            font-size: 55px;
            /* color: orange; */
        }

        .list div span {
            height: 61px;
            line-height: 61px;
            text-align: center;
            font-size: 30px;
        }

        .pic img {
            margin-top: 25px;
            width: 100%;
            height: 227px;
        }
    </style>
</head>

<body>
    <div class="box">
        <header>
            <!-- <span class="iconfont icon-dingdan"></span> -->
            <i class="iconfont icon-dingdan font"></i>
            <span>账单</span>
            <i class="iconfont icon-fenxiang font"></i>
            <i class="iconfont icon-sousuo font"></i>
            <i class="iconfont icon-gengduo font"></i>
        </header>
        <section>
            <div class="main">
                <div>
                    <i class="iconfont icon-saoyisao"></i>
                    <span>扫一扫</span>
                </div>
                <div>
                    <i class="iconfont icon-paihangbang"></i>
                    <span>付款</span>
                </div>
                <div>
                    <i class="iconfont icon-yinhangka"></i>
                    <span>银行卡</span>
                </div>
                <div>
                    <i class="iconfont icon-kabao"></i>
                    <span>卡包</span>
                </div>
            </div>
            <div class="list">
                <div>
                    <i class="iconfont icon-yinhangyouhui" style="color: orange"></i>
                    <span>银行卡还贷</span>
                </div>
                <div>
                    <i class="iconfont icon-dianying2" style="color: rgb(151, 183, 252);"></i>
                    <span>电影票</span>
                </div>
                <div>
                    <i class="iconfont icon-xiaoshi1" style="color: rgb(255, 113, 113);"></i>
                    <span>小吃</span>
                </div>
                <div>
                    <i class="iconfont icon-yanchu1" style="color: rgb(255, 0, 0);"></i>
                    <span>演唱会</span>
                </div>
                <div>
                    <i class="iconfont icon-remen" style="color: rgb(253, 0, 0);"></i>
                    <span>热门</span>
                </div>
                <div>
                    <i class="iconfont icon-ditu" style="color: rgb(11, 252, 91);"></i>
                    <span>去哪里</span>
                </div>
                <div>
                    <i class="iconfont icon-hongbao" style="color: rgb(250, 14, 14);"></i>
                    <span>红包</span>
                </div>
                <div>
                    <i class="iconfont icon-shangquan"></i>
                    <span>城市</span>
                </div>
                <div>
                    <i class="iconfont icon-maiyizengyi" style="color: rgb(255, 187, 0);"></i>
                    <span>亲密付</span>
                </div>
                <div>
                    <i class="iconfont icon-tuipiao" style="color: rgb(151, 183, 252);"></i>
                    <span>转账</span>
                </div>
                <div>
                    <i class="iconfont icon-jiju" style="color: rgb(151, 183, 252);"></i>
                    <span>手机充值</span>
                </div>
                <div>
                    <i class="iconfont icon-lipinka" style="color: orange"></i>
                    <span>礼品卡</span>
                </div>

            </div>

            <div class="pic">
                <img src="../img/2054377.jpg" alt="">

            </div>
        </section>
        <footer>
            <div class="items">
                <i class="iconfont icon-weixin pict"></i>
                <span>微信</span>
            </div>
            <div class="items">
                <i class="iconfont icon-shouye pict"></i>
                <span>首页</span>
            </div>
            <div class="items">
                <i class="iconfont icon-faxian1 pict"></i>
                <span>朋友圈</span>
            </div>
            <div class="items">
                <i class="iconfont icon-pinglun1 pict"></i>
                <span>聊天</span>
            </div>

        </footer>
    </div>
</body>

15.移动端布局

1.学会如何截图

在这里插入图片描述

2.模拟器上显示的分辨率是css像素：设备的独立像素，

物理分辨率：设备像素

他们之间的关系跟设备缩放比例有关，即：

设备像素比（dpr）= 物理像素/CSS像素

按住Shift+鼠标左键可以放大/缩小

在这里插入图片描述


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- user-scalable=no表示禁用放缩 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100%;
            height: 300px;
            background: red;
        }
    </style>
    <div>
    </div>
</body>

16.足球圈移动端布局案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font-icon/font_3573520_gov0k2wzlya/iconfont.css">
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column
        }

        header {
            height: 44px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* header */
        header div {
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: white;
            font-size: 12px;
        }

        header div:nth-child(1) {
            border-radius: 13px 0 0 13px;
            background-color: #63d985;
        }

        header div:nth-child(2) {
            border-radius: 0 13px 13px 0;
            background-color: #3dd066;
            opacity: 0.9;
        }

        /* section */
        section {
            flex: 1;
            overflow: auto;
        }

        section ul {
            display: flex;
            text-align: center;
            height: 35px;
            line-height: 35px;
            justify-content: space-around;
            border-bottom: 1px solid #d9d9d9;
            font-size: 14px;

            position: sticky;
            top: 0px;
            background-color: white;
        }

        section ul li {
            flex: 1;

        }

        /* 默认选中 */
        section ul li:nth-child(1) {
            color: green;
            border-bottom: 3px solid #3dd066;
        }

        section li:hover {
            color: green;
            border-bottom: 3px solid #3dd066;

        }

        section div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            text-align: center;
            align-items: center;
        }

        section div>div {
            margin-top: 4px;
        }

        section div div {
            width: 49%;
            border: 1ps solid grey;
            /* margin-top: 4px; */
        }

        section div img {
            height: 227px;
            width: 100%;
            border: 1ps solid grey;
        }

        section div div p {
            width: 100%;
            border: 1px solid rgba(128, 128, 128, 0.295);
            height: 30px;
            line-height: 30px;
            font-size: 12px;

        }

        /* footer */
        footer {
            height: 44px;
            background: white;
            color: #d5d5d7;

        }

        footer ul {
            display: flex;

        }

        footer li {
            height: 100%;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        footer li i {
            height: 21px;
            font-size: 16px;
            line-height: 21px;
        }

        footer li span {
            font-size: 12px;
            height: 17px;
            line-height: 17px;
        }

        footer li:hover {
            color: #08ca43;
        }


        footer li:nth-child(3) {
            height: 50px;
            width: 50px;
            border: 1px solid grey;
            border-radius: 50%;
            position: relative;
            line-height: 50px;
            top: -14px;
            background-color: white;
        }

        footer li:nth-child(3) i {
            font-size: 30px;
        }
    </style>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>

        <div class="list">
            <div>
                <img src="../img/2054377.jpg" alt="">
                <p>方天画戟</p>
            </div>
            <div>
                <img src="../img/2054509.jpg" alt="">
                <p>小丸子</p>
            </div>
            <div>
                <img src="../img/2054783.jpg" alt="">
                <p>千鸟</p>
            </div>
            <div>
                <img src="../img/2055030.jpg" alt="">
                <p>也许</p>
            </div>
            <div>
                <img src="../img/2055077.jpg" alt="">
                <p>悲哀</p>
            </div>
            <div>
                <img src="../img/2055090.jpg" alt="">
                <p>不过</p>
            </div>
            <div>
                <img src="../img/2055093.jpg" alt="">
                <p>伤害</p>
            </div>
            <div>
                <img src="../img/2055094.jpg" alt="">
                <p>天下</p>
            </div>

        </div>

    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye1"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-sousuo"></i>
                <span>发现</span>
            </li>
            <li>
                <i class="iconfont icon-xiangji1"></i>

            </li>
            <li>
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </li>
            <li>
                <i class="iconfont icon-shibai"></i>
                <span>退出</span>
            </li>
        </ul>
    </footer>
</body>

</html>

17.京东分类案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        ul {
            list-style: none;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            height: 45px;
            background-color: grey;
        }

        footer {
            height: 50px;
            background-color: grey;
        }

        section {
            flex: 1;
            display: flex;
            overflow: auto;
        }

        section ul {
            width: 85px;
            overflow: auto;

        }

        section ul li {
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            background-color: #f8f8f8;
        }

        section ul li:hover {
            background-color: white;
            color: red;
        }

        section>div {
            flex: 1;
            background-color: white;

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }


        .content {
            overflow: auto;
        }

        .content>div {
            height: 101px;
            width: 33.33%;
            text-align: center;
        }

        .content img {
            width: 60px;
            height: 50px;
            margin-top: 11px;
        }
    </style>
</head>

<body>
    <header></header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>排山倒海</li>
            <li>贯虹之槊</li>
            <li>裁雨留虹</li>
            <li>雨线难画</li>
            <li>听凭风引</li>
            <li>来去自如</li>
            <li>分崩离析</li>
            <li>固若金汤</li>
            <li>南蛮入侵</li>
            <li>安如磐石</li>
            <li>化雨笼山</li>
            <li>天动万象</li>
            <li>金鱼来喽</li>
            <li>万箭齐发</li>
            <li>鸡汤来喽</li>
            <li>过河拆桥</li>
            <li>至夜幻现</li>
            <li>不动如山</li>
        </ul>

        <div class="content">
            <div>
                <img src="../img/2054377.jpg" alt="">
                <p>行秋</p>
            </div>
            <div>
                <img src="../img/2054509.jpg" alt="">
                <p>班尼特</p>
            </div>
            <div>
                <img src="../img/2054783.jpg" alt="">
                <p>钟离</p>
            </div>
            <div>
                <img src="../img/2055030.jpg" alt="">
                <p>甘雨</p>
            </div>
            <div>
                <img src="../img/2055077.jpg" alt="">
                <p>椰羊</p>
            </div>
            <div>
                <img src="../img/2055090.jpg" alt="">
                <p>荧</p>
            </div>
            <div>
                <img src="../img/2055093.jpg" alt="">
                <p>空</p>
            </div>
            <div>
                <img src="../img/2055094.jpg" alt="">
                <p>诺艾尔</p>
            </div>
            <div>
                <img src="../img/2055095.jpg" alt="">
                <p>迪卢克</p>
            </div>
            <div>
                <img src="../img/2055096.jpg" alt="">
                <p>刻晴</p>
            </div>
            <div>
                <img src="../img/2055321.jpg" alt="">
                <p>七七</p>
            </div>
            <div>
                <img src="../img/2055323.jpg" alt="">
                <p>菲谢尔</p>
            </div>
            <div>
                <img src="../img/2055392.jpg" alt="">
                <p>凝光</p>
            </div>
            <div>
                <img src="../img/2055472.jpg" alt="">
                <p>北斗</p>
            </div>
            <div>
                <img src="../img/2055636.jpg" alt="">
                <p>迪奥娜</p>
            </div>
            <div>
                <img src="../img/2055879.jpg" alt="">
                <p>荒泷一斗</p>
            </div>
            <div>
                <img src="../img/2055896.jpg" alt="">
                <p>dio</p>
            </div>
            <div>
                <img src="../img/2055952.jpg" alt="">
                <p>九条裟罗</p>
            </div>
            <div>
                <img src="../img/2056151.jpg" alt="">
                <p>雷电将军</p>
            </div>
            <div>
                <img src="../img/2056257.jpg" alt="">
                <p>香菱</p>
            </div>
            <div>
                <img src="../img/2056185.jpg" alt="">
                <p>枫原万叶</p>
            </div>
            <div>
                <img src="../img/2056257.jpg" alt="">
                <p>达达利亚</p>
            </div>
            <div>
                <img src="../img/2056260.jpg" alt="">
                <p>莫娜</p>
            </div>
            <div>
                <img src="../img/2056302.jpg" alt="">
                <p>神里绫华</p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>

18.横向滚动

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        ul {
            list-style: none;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        /* header */
        header {
            height: 45px;
            background-color: grey;
        }

        header ul {
            display: flex;
            overflow: auto;
            color: white;
        }


        /* 横向滚动 */
        header ul li {
            flex-shrink: 0;
            line-height: 45px;
            padding: 0 10px;
        }

        header ul li:hover {
            background-color: white;
            color: red;
        }

        /* footer */
        footer {
            height: 50px;
            background-color: grey;
        }

        section {
            flex: 1;
            display: flex;
            overflow: auto;
        }

        section ul {
            width: 85px;
            overflow: auto;

        }

        section ul li {
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            background-color: #f8f8f8;
        }

        section ul li:hover {
            background-color: white;
            color: red;
        }

        section>div {
            flex: 1;
            background-color: white;

            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        ::-webkit-scrollbar {
            display: none;
        }


        .content {
            overflow: auto;
        }

        .content>div {
            height: 101px;
            width: 33.33%;
            text-align: center;
        }

        .content img {
            width: 60px;
            height: 50px;
            margin-top: 11px;
        }
    </style>
</head>

<body>
    <header>
        <ul>
            <li>贯虹之槊</li>
            <li>尘世之锁</li>
            <li>阿莫斯之弓</li>
            <li>若水</li>
            <li>绝弦</li>
            <li>神射手之誓</li>
            <li>护摩之杖</li>
        </ul>
    </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>排山倒海</li>
            <li>贯虹之槊</li>
            <li>裁雨留虹</li>
            <li>雨线难画</li>
            <li>听凭风引</li>
            <li>来去自如</li>
            <li>分崩离析</li>
            <li>固若金汤</li>
            <li>南蛮入侵</li>
            <li>安如磐石</li>
            <li>化雨笼山</li>
            <li>天动万象</li>
            <li>金鱼来喽</li>
            <li>万箭齐发</li>
            <li>鸡汤来喽</li>
            <li>过河拆桥</li>
            <li>至夜幻现</li>
            <li>不动如山</li>
        </ul>

        <div class="content">
            <div>
                <img src="../img/2054377.jpg" alt="">
                <p>行秋</p>
            </div>
            <div>
                <img src="../img/2054509.jpg" alt="">
                <p>班尼特</p>
            </div>
            <div>
                <img src="../img/2054783.jpg" alt="">
                <p>钟离</p>
            </div>
            <div>
                <img src="../img/2055030.jpg" alt="">
                <p>甘雨</p>
            </div>
            <div>
                <img src="../img/2055077.jpg" alt="">
                <p>椰羊</p>
            </div>
            <div>
                <img src="../img/2055090.jpg" alt="">
                <p>荧</p>
            </div>
            <div>
                <img src="../img/2055093.jpg" alt="">
                <p>空</p>
            </div>
            <div>
                <img src="../img/2055094.jpg" alt="">
                <p>诺艾尔</p>
            </div>
            <div>
                <img src="../img/2055095.jpg" alt="">
                <p>迪卢克</p>
            </div>
            <div>
                <img src="../img/2055096.jpg" alt="">
                <p>刻晴</p>
            </div>
            <div>
                <img src="../img/2055321.jpg" alt="">
                <p>七七</p>
            </div>
            <div>
                <img src="../img/2055323.jpg" alt="">
                <p>菲谢尔</p>
            </div>
            <div>
                <img src="../img/2055392.jpg" alt="">
                <p>凝光</p>
            </div>
            <div>
                <img src="../img/2055472.jpg" alt="">
                <p>北斗</p>
            </div>
            <div>
                <img src="../img/2055636.jpg" alt="">
                <p>迪奥娜</p>
            </div>
            <div>
                <img src="../img/2055879.jpg" alt="">
                <p>荒泷一斗</p>
            </div>
            <div>
                <img src="../img/2055896.jpg" alt="">
                <p>dio</p>
            </div>
            <div>
                <img src="../img/2055952.jpg" alt="">
                <p>九条裟罗</p>
            </div>
            <div>
                <img src="../img/2056151.jpg" alt="">
                <p>雷电将军</p>
            </div>
            <div>
                <img src="../img/2056257.jpg" alt="">
                <p>香菱</p>
            </div>
            <div>
                <img src="../img/2056185.jpg" alt="">
                <p>枫原万叶</p>
            </div>
            <div>
                <img src="../img/2056257.jpg" alt="">
                <p>达达利亚</p>
            </div>
            <div>
                <img src="../img/2056260.jpg" alt="">
                <p>莫娜</p>
            </div>
            <div>
                <img src="../img/2056302.jpg" alt="">
                <p>神里绫华</p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>

19.多列布局

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* height: 300px; */
            background-color: yellow;

            /* 显示的列数 */
            column-count: 5;

            /* 调整列间距 */
            column-gap: 100px;

            /* 列边框 */
            column-rule: 2px solid red;

            /* 列高度统一 */
            column-fill: balance;

            /* 属性值：banlance--高度统一 auto--把父盒子撑满 */

            /* 调整列宽 */
            column-width: 100px;
        }


        div>h1 {
            /* 加载要跨列的地方 */
            column-span: all;
            text-align: center;
            /* 属性值：none不横跨 all横跨所有 */
        }
    </style>
</head>

<body>
    <div>
        <h1>赵钱孙李</h1>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor optio, ea nobis id odio nemo officiis in amet
        quo enim commodi molestiae fugiat minima inventore sequi libero, atque dolore esse.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ullam nulla necessitatibus eius, sit nam, ut
        asperiores tenetur sint ducimus voluptatibus exercitationem consequuntur libero, iure veniam nemo dolorem
        delectus saepe?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat quae ullam inventore molestiae ipsam
        nostrum suscipit voluptas ipsum ea, minima, voluptatibus omnis earum sint iste officiis itaque! Eius, officiis?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia voluptatum voluptate tempore! Eius adipisci
        delectus quae unde incidunt labore debitis veniam ex harum ipsum laborum quos, sapiente dolores inventore
        molestiae.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, ducimus molestias ipsa temporibus, ipsum
        recusandae dolores eum ipsam facilis esse, accusamus architecto nostrum perspiciatis? Quae dolor corporis
        debitis dolorem laudantium.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa aut tenetur veritatis porro odio quis iusto
        similique ea assumenda dolorem perspiciatis voluptatibus at quae non, quo voluptate ipsam provident labore.
    </div>
</body>

20.多列布局案例

效果图：

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            column-count: 5;
            /* 这里可以放一张动图 */
            background-image: url(../img/2055636.jpg);
            background-repeat: repeat;
        }

        .box img {
            width: 100%;
        }

        .box div {
            border: 3px solid green;
            padding: 5px;
            margin-bottom: 10px;
            /* 默认会将一个完整的盒子拆开上下部分 */
            /* 禁止盒子内部折行显示 */
            break-inside: avoid;
        }

        .box div p {
            line-height: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="box">

        <div>
            <img src="../img/2054377.jpg" alt="">
            <p>琪亚娜</p>
        </div>
        <div>
            <img src="../img/2054509.jpg" alt="">
            <p>卡卡西</p>
        </div>
        <div>
            <img src="../img/2054783.jpg" alt="">
            <p>板鸭</p>
        </div>
        <div>
            <img src="../img/2055030.jpg" alt="">
            <p>布洛尼亚</p>
        </div>
        <div>
            <img src="../img/2055077.jpg" alt="">
            <p>希尔</p>
        </div>
        <div>
            <img src="../img/2055090.jpg" alt="">
            <p>芽衣</p>
        </div>
        <div>
            <img src="../img/2055093.jpg" alt="">
            <p>八重樱</p>
        </div>
        <div>
            <img src="../img/2055094.jpg" alt="">
            <p>德丽莎</p>
        </div>
        <div>
            <img src="../img/2055095.jpg" alt="">
            <p>姬子</p>
        </div>
        <div>
            <img src="../img/2055096.jpg" alt="">
            <p>猫猫</p>
        </div>
        <div>
            <img src="../img/2055321.jpg" alt="">
            <p>阿波尼亚</p>
        </div>
        <div>
            <img src="../img/2055323.jpg" alt="">
            <p>菲利斯</p>
        </div>
        <div>
            <img src="../img/2055392.jpg" alt="">
            <p>帕朵</p>
        </div>
        <div>
            <img src="../img/2055472.jpg" alt="">
            <p>凯文</p>
        </div>
    </div>
</body>