css布局技巧

m0_63165331

于 2024-07-14 12:32:16 发布

阅读量649

点赞数 13

文章标签： css 前端浮动布局定位伸缩盒模型多列布局

本文链接：https://blog.csdn.net/m0_63165331/article/details/140414664

版权

1.居中问题

1.1块级元素在父容器中居中

如下代码，页面绘制两个盒子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css布局技巧</title>
    <style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: #888;
        }
        .inner{
            height: 100px;
            width: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
     <div class="outer">
        <div class="inner">inner</div>
     </div>
</body>
</html>

呈现效果如下：

把中间橙色的盒子放到灰色盒子中间，可以通过以下方式来实现。

子元素添加margin，同时要给父元素添加overflow，解决子元素margin塌陷问题，如下代码：

.outer{
    height: 400px;
    width: 400px;
    background-color: #888;
    /* 解决子元素margin塌陷问题 */
    overflow: hidden;
}
.inner{
    height: 100px;
    width: 200px;
    background-color: orange;
    /* 水平居中 */
    margin: 0 auto;
    /* 上下居中，设置margin-top 它的值需要自己计算，计算时要考虑border和padding */
    margin-top: 150px;
}

实现效果如下：

1.2 行内元素在父容器中居中

如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ss布局小技巧-行内元素居中</title>
    <style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: #888;
        }
        .inner{
            background-color: orange;
            font-size: 20px;
        }
    </style>
</head>
<body>
     <div class="outer">
        <span class="inner">我是行内元素</span>
     </div>
</body>
</html>

页面呈现效果如下：

行内元素和行内块元素都可以像处理块内的文本一样处理。让灰色盒子中的橙色span元素居中可以给灰色盒子添加以下两行代码即可：

/* 让块内的文本水平居中 */
text-align: center;
/* 让块内的文本垂直居中，设置行高等于容器的高度 */
line-height: 400px;

实现效果如下：

1.3 行内元素和行内块元素在父容器中居中

如下代码，一个盒子内有一个span元素和一个img元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内元素居中-与行内块元素居中</title>
    <style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: #888;
        }
        .inner{
            background-color: orange;
            font-size: 20px;
        }
        img{
            height: 100px;
        }
    </style>
</head>
<body>
     <div class="outer">
        <span class="inner">我是行内元素</span>
        <img src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406111305778.jpg" alt="">
     </div>
</body>
</html>

页面呈现效果如下：

要求是span元素和图片居中，然后两个元素与灰色盒子居中。

行内元素和行内块元素可以像处理文本一样来处理，因此可以给父元素添加如下两行代码：

/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 400px;

添加后效果如下：

span元素和img元素还没对齐，给两个元素都添加如下样式：

/* 图片与文字居中 */
vertical-align: middle;

效果如下：

最后处理span元素和img元素中间的空白问题，只需要在他们的父元素中设置font-size为0即可，如下为最终的css样式：

.outer{
    height: 400px;
    width: 400px;
    background-color: #888;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 400px;
    /* 处理元素与元素之间的空白问题， */
    font-size: 0;
}
.inner{
    background-color: orange;
    font-size: 20px;
    /* 图片与文字居中 */
    vertical-align: middle;
}
img{
    height: 100px;
    /* 图片与文字居中 */
    vertical-align: middle;
}

最终样式如下：

1.4 总结

行内元素、行内块元素，可以被父元素当做文本处理，例如：text-align 、 line-height 、 text-indent等。
如何让子元素在父元素中 水平居中：
- 若子元素为块元素，给父元素加上： margin:0 auto; 。
- 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
如何让子元素在父元素中 垂直居中：
- 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子总高) / 2。
- 若子元素为行内元素、行内块元素：
让父元素的 height = line-height

每个子元素都加上： vertical-align:middle
元素之间的空白问题
- **产生原因：**行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
- **解决方案：**给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小。
行内块的幽灵空白问题：
- **产生原因：**行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
- 解决方案：
  - **方案一：**给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
  - **方案二：**若父元素中只有一张图片，设置图片为 display:block 。
  - **方案三：**给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。

2.浮动布局

2.1 浮动后的特点：

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

2.2 浮动后的影响：

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

因此一般设置浮动时所有的兄弟元素要么都浮动，要么都不浮动。

2.3 清除浮动：

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三： 给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。

2.4 布局技巧

在实际画页面的时候，可以先定义三种类名样式，clear-fix用来清除浮动，left-fix用来左浮动，right-fix用来右浮动。如下所示：

.clear-fix::after{
    content: "";
    display: block;
    clear:both;
}
.left-fix{
    float: left;
}
.rigth-fix{
    float:right;
}

在写页面结构的时候，如果想让元素浮动，就直接添加对应的类名即可，添加后及时给父元素添加清除浮动的类名，这样绘制起来就方便的多。

如下代码是采用浮动布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style>
        
        /* 通用样式 */
        .clear-fix::after{
        content: "";
        display: block;
        clear:both;
        }
        .left-fix{
            float: left;
        }
        .rigth-fix{
            float:right;
        }


        .outer{
            height: 200px;
            width: 600px;
            background-color: #666;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: orange;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="outer clear-fix">
        <div class="inner left-fix"></div>
        <div class="inner left-fix"></div>
        <div class="inner left-fix"></div>
        <div class="inner rigth-fix"></div>
        <div class="inner rigth-fix"></div>
    </div>
</body>
</html>

实现效果如下：

3.定位

3.1 相对定位

给元素设置 position:relative 可实现相对定位。
可以使用left 、 right 、 top 、 bottom 四个属性调整位置。
相对定位是指相对自己原来的位置。
相对定位不会脱离文档流，不会对其他元素产生影响。
相对定位的元素也可以设置margin，也可以浮动，但是一般不这样做。

3.2 绝对定位

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位参考它的包含块。
- 对于没有脱离文档流的元素：包含块就是父元素。
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。
绝对定位会脱离文档流，对后面的兄弟元素和父元素有影响。
绝对定位不能同时设置浮动，否则浮动失效。
无论什么元素，设置为绝对定位后，都变成了定位元素（默认宽高被内容撑开，且能自由设置宽高）。
绝对定位的元素也可以设置margin，也可以浮动，但是一般不这样做。

3.3 固定定位

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位参考它的视口。
固定定位脱离文档流，对后面的兄弟元素和父元素有影响。
固定定位不能同时设置浮动，否则浮动失效。
无论什么元素，设置为固定定位后，都变成了定位元素（默认宽高被内容撑开，且能自由设置宽高）。
固定定位的元素也可以设置margin，也可以浮动，但是一般不这样做。

3.4 粘性定位

给元素设置 position:sticky 即可实现粘性定位。

可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

粘性定位参考离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

粘性定位不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。

粘性定位不能同时设置浮动，否则浮动失效。

粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

3.5 四种定位对比

对比项目	相对定位	绝对定位	固定定位	粘性定位
设置方式	position:relative	position: absolute	position: fixed	position:sticky
调整位置	left 、 right 、 top 、 bottom	left 、 right 、 top 、 bottom	left 、 right 、 top 、 bottom	left 、 right 、 top 、 bottom
参考点	相对自己原来的位置	它的包含块	视口	离它最近的一个拥有“滚动机制”的祖先元素
是否脱离文档流	否	是	是	否
能否设置浮动	能，不推荐	不能	不能	能，不推荐
能否设置margin	能，不推荐	能，不推荐	能，不推荐	能，不推荐
是否为定位元素	否	是	是	否
应用场景	与绝对定位搭配使用，实现精确地控制子元素在其父元素内的位置，而不必担心其他元素或页面布局的影响，在处理如弹出框、提示信息、自定义下拉菜单等场景时特别有用。	与相对定位搭配使用，实现精确地控制子元素在其父元素内的位置，而不必担心其他元素或页面布局的影响，在处理如弹出框、提示信息、自定义下拉菜单等场景时特别有用。	页面广告、固定的侧边栏等等。	专门用于窗口滚动时的新的定位方式，可以在元素到达某个位置时将其固定。

3.6 定位的应用示例

3.6.1 子绝父相

子绝父相是指给子元素设置绝对定位，给父元素设置相对定位，让父元素成为它的包含块。这样可以精确地控制子元素在其父元素内的位置，而不必担心其他元素或页面布局的影响，在处理如弹出框、提示信息、自定义下拉菜单等场景时特别有用。如下JD商城中当鼠标放在左边的导航栏上的时候，右边就会弹出一个窗体盖住原来的轮播图位置。

如下代码是一个简单的示例，当鼠标经过时，会出现窗体盖住原来的图片位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子绝父相示例</title>
    <style>
        /* 通用样式 */
        .clear-fix::after{
        content: "";
        display: block;
        clear:both;
        }
        .left-fix{
            float: left;
        }
        .rigth-fix{
            float:right;
        }
        /* 初始化样式 */
        ul{
            padding: 0;
        }
        li{
            list-style-type:none;
            height: 30px;
            padding-left: 10px;
        }
        a{
            text-decoration:none;
            font-size: 16px;
            color: #000;
        }
        /* 设置样式 */
        .outer{
            width: 550px;
            height: 400px;
        }
        .nav{
            height: 400px;
            width: 150px;
            background-color: #ebebeb;
            /* 开启相对定位 */
            position: relative;
        }
        .inf{
            height: 400px;
            width: 400px;
            background-color: #b1b1b1;
            /* 开启绝对定位 */
            position: absolute;
            left: 150px;
            top: 0;
            /* 让文字居中 */
            text-align: center;
            line-height: 400px;
            /* 让元素不显示 */
            display: none;
        }
        img{
            height: 400px;
        }
        /* 设置鼠标经过样式 */
        li:hover .inf{
            display:block
        }
        li:hover a{
            color: #ffffff;
        }
        li:hover{
            background-color: red;
        }
        
        
        

    </style>
</head>
<body>
    <div class="outer clear-fix">
        <div class="nav left-fix">
            <ul class="clear-fix">
                <li>
                    <a href="#">文字信息1</a>
                    <div class="inf">文字内容1</div>
                </li>
                <li>
                    <a href="#">文字信息2</a>
                    <div class="inf">文字内容2</div>
                </li>
                <li>
                    <a href="#">文字信息3</a>
                    <div class="inf">文字内容3</div>
                </li>
                <li>
                    <a href="#">文字信息4</a>
                    <div class="inf">文字内容4</div>
                </li>
                <li>
                    <a href="#">文字信息5</a>
                    <div class="inf">文字内容5</div>
                </li>
            </ul>
        </div>
        <img class='left-fix' src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406111305778.jpg" alt="">
    </div>
    
</body>
</html>

页面效果如下：

3.6.2 固定定位应用

如下代码是固定定位的应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .myblog{
            background-color: beige;
            width: 160px;
            height: 160px;
            padding: 10px;
            font-size: 14px;
            
            /* 开启固定定位 */
            position: fixed;
            bottom: 0;
            right: 0;
        }
        .qr-code{
            text-align:center;
            margin-top: 10px;
        }
        img{
            height: 100px;
        }
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h2>西游记</h2>
    <p>东胜神洲傲来国海边有一花果山，山顶一石，受日月精华，产下一个石猴。石猴勇探瀑布飞泉，发现水帘洞，被众猴奉为“美猴王”。猴王领群猴在山中自由自在数百载，偶闻仙、佛、神圣三者可躲过轮回，与天地山川齐寿，遂独自乘筏泛海，历南赡部洲，至西牛贺洲，终在灵台方寸山斜月三星洞，为菩提祖师收留，赐其法名孙悟空。悟空在三星洞悟彻菩提妙理，学到七十二般变化和筋斗云之术后返回花果山，一举灭妖魔混世魔王，花果山狼、虫、虎、豹等七十二洞妖王都来奉其为尊。</p>
    <p>孙悟空占山为王，号为美猴王。苦于无兵刃，遂去东海龙宫求取，东海龙王敖广及其兄弟送给他一支如意金箍棒及一身披挂。又与牛魔王、蛟魔王、鹏魔王、狮驼王、猕猴王、禺狨王等结为兄弟，日逐讲文论武，弦歌欢舞。一日被阴司按勾去，遂大闹幽冥，于生死簿上勾去所有猴属之名。龙王、地藏王上天庭告状，太白金星建议招安孙悟空，玉帝准奏。</p>
    <p>玉帝封孙悟空做“弼马温”，着他看管马匹。孙悟空后得知此官职卑微，大怒，打出南天门，回花果山，自封为“齐天大圣”，其他几个兄弟也分别自称了平天大圣、覆海大圣、混天大圣、移山大圣、通风大圣、驱神大圣。</p>
    <p>托塔天王李靖及哪吒三太子奉旨兴师捉拿孙悟空，被孙悟空打败，回天庭复旨。太白金星奏请玉帝降旨封孙悟空为齐天大圣，但不给他事务与俸禄。玉帝准奏。孙悟空应太白金星之邀，再入天宫。玉帝封其为齐天大圣，并赐予他齐天大圣府。孙悟空在天上无事，每日交朋结义，不论尊卑。玉帝怕他闲中生事，让其看管蟠桃园。王母举办蟠桃盛会，孙悟空怪王母未请其赶会，竟闯至会上，饱吃仙酒佳肴，又至兜率宫，吃尽金丹；搅乱蟠桃会后，逃回花果山后，玉帝派十万天兵擒拿，未胜。</p>
    <p>观音菩萨推荐二郎神助战。悟空和二郎各显神通：多般变化，难分胜负；老君掷金钢琢打倒悟空，哮天犬咬住悟空方被擒。玉帝令天神将其处死，刀砍枪刺，雷击火燃，孙悟空却毫发无损。太上老君将其关入八卦炉，孙悟空不但不死，还炼就一双火眼金睛。四十九天后，悟空推翻八卦炉，舞金箍棒，乱天宫。诸天将不能敌，玉帝只得请来西天佛祖。如来法力无边，悟空无法跳出其手心，被压于五行山下，饮餐铁丸、渴饮铜汁度日。</p>
    <p>五百年后，如来因南赡部洲之人贪淫乐祸，多杀多争，令观音菩萨去东土觅一人，来西天取经，以普渡众生，并赐箍儿三个作降妖用。观世音菩萨携木叉行者往东土寻取经人，路上收服两个妖魔：一个原为灵霄殿下侍銮舆的卷帘大将，因失手打破玻璃盏，被玉帝贬在流沙河受苦；一个本是天河里的天蓬元帅，因带酒戏嫦娥，被打下凡尘投胎为猪形，在福陵山云栈洞为妖。观音替他们取法名沙悟净和猪悟能，叫他们等取经人来，保护取经人西去。观音又请玉帝饶恕犯法的西海龙王之子，将其送于深涧中，只等取经人来，为取经人作个脚力。</p>
    <p>行至五行山，被压在山下的孙悟空表示愿意悔过，观音也令其等唐国取经人来，“你可跟他做个徒弟，秉教伽持，入我佛门，再修正果”。
    <p>唐太宗开科取士，青年陈光蕊高中状元，又娶相府殷小姐为妻。之后，官拜江州州主。陈光蕊携妻赴任，路上，被贼人刘洪谋害，妻子被占。陈之妻殷氏产下一子，抛入江中，被金山寺寺僧搭救。此子十八年后受戒，法名玄奘。玄奘终与母亲相见，又求见外祖父，报了血仇。
    <p>长安泾河边有一渔二樵叙说城中有神卦，按卦打鱼，百下百着，恰被巡水夜叉听见，转报龙王。龙王即变秀士询问雨情。卜者所答恰与玉旨相合，龙王为赌胜，错行雨，当斩，龙王求卜者搭救卜者嘱龙王进宫求助唐王。唐太宗梦中允龙王之请，第二日退朝后留魏征对弈，以拖过午时三刻。不料魏征午时睡着，梦斩泾河龙。龙王在冥间告唐王，冥王拘唐王三曹对案。判官受魏征所托，私改生死簿，唐太宗还阳，派刘全地府进瓜果，又因在地府见冤魂无数，遂决定建水陆大道场，选一名有德行的高僧主持法会。众臣举洪福寺和尚陈玄奘。玄奘前身是如来弟子金蝉，因无心听讲，被贬凡尘，从小经历种种磨难。观音到长安，与木叉变成癫头和尚，献袈裟、锡杖于唐王，使唐王赐与玄奘。又于法会上现身，指示西天有“大乘佛法三藏”，可度亡脱苦，消无妄之灾。玄奘因向唐王请命去西天取经。唐王与玄奘拜为兄弟，又命其指经取号，号作“三藏”，与文武百官送其西行。</p>
    <p>三藏骑御赐白马，与两名侍者，一路出大唐西界，在双叉岭被老虎精变成的“寅将军”将其两名侍者食尽，三藏独得逃生，此为三藏取经初出长安第一难。前行遇猛虎、长蛇，为猎户刘伯钦所救。伯钦送三藏至两界山，猛听得山下有人大叫“我师傅来也！”原来此山就是五行山改名，山下压着五百年前大闹天宫的孙悟空。三藏揭去山顶如来金字压帖，悟空裂山跳出，拜三藏为师，被赐名孙行者。</p>
    <p>路上，孙悟空打死六个强盗，不堪唐僧数落，一怒之下去了龙宫。唐僧接受观音赠送的用来钳制孙悟空的两件东西——嵌金花帽与紧箍咒。悟空听从龙王劝告，回到唐僧身边。在此间隙，观音赠三藏一领直裰、一顶花帽，又教他一篇“紧箍咒”。三藏哄悟空戴上花帽，一念紧箍咒，悟空痛得打滚，原来那花帽是如来所赐紧箍。悟空只得侍奉唐僧奔西而进。</p>
    <p>二人至鹰愁涧，唐僧的白马被涧里玉龙吞下肚去。观音将玉龙变成白马，供三藏乘骑。</p>
    <p>在观音院，悟空卖弄唐僧的锦襕袈裟，观音院长老金池长老心生贪念，欲火烧唐僧师徒，却被悟空弄法反烧了禅院。但袈裟反被金池长老之友黑风怪窃走。孙悟空求助观音，他设计让观音化作黑风怪的妖友，自己化作仙丹，诱黑风怪吞下，黑风怪降伏。</p>
    <p>唐僧师徒继续西行，至高老庄，得知庄主女儿被一妖怪强占，悟空擒拿此妖，追至云栈洞。知妖怪原是天庭的天蓬元帅，因调戏嫦娥，被贬下界，错投猪胎，故形貌像猪。经观音收伏，赐名猪悟能，在此等候取经人。孙悟空引他拜见唐僧，唐僧收其为徒，唐僧因其自称断了“五荤三厌”，又替他起别号叫“八戒”。</p>
    <p>过浮屠山，乌巢禅师传授唐僧《多心经》。</p>
    <p>途经八百里黄风岭，唐僧被黄风怪摄入黄风洞。悟空到小须弥山请来灵吉菩萨收服黄风怪，原来此怪乃灵山下得道的黄毛貂鼠。</p>
    <p>在流沙河，唐僧收被观音点化的沙悟净为三弟子，赐号沙和尚。师徒四人跋山涉水，往西天取经。</p>
    <p>师徒四众渡河西行，遇观音、普贤、文殊菩萨和黎山老母变成一母三女试禅心。八戒凡心未退，被绑吊在树上。</p>
    <p>经万寿山五庄观，悟空偷镇元子大仙“人参果”，又推倒人参果树，为大仙所困。悟空三岛求方，最后到南海请来观音，用手执净瓶中的甘露救活人参果树。</p>
    <p>至白虎岭，尸魔欲害三藏，初变少女，次变老妇，三变公公，均被行者识破除之。由于八戒撺掇，三藏怪行者行凶，念紧箍咒，逐走行者。行者复回花果山为妖。三藏遇黄袍怪被捉。黄袍怪之妻为宝象国公主，搭救之。三藏至宝象国传信，国王遣八戒、沙僧降妖，反被黄袍怪所败。黄袍怪进宫诬陷三藏为白虎精。白龙马救师未果，嘱八戒去请行者。行者战败黄袍怪，后者原来是奎宿下凡。悟空救出师父，师徒言归于好。</p>
    <p>过平顶山，三藏命八戒巡路。八戒初则偷懒睡觉，继则编谎骗师，均被行者识破。山中有金角、银角二妖，经行者恶斗收伏之，妖魔却是老君的二个看炉童子，由观音借来托化妖魔以试三藏师徒。</p>
    <p>夜宿宝林寺，三藏夜遇乌鸡国王鬼魂诉冤。行者救活乌鸡国王，战败杀害国王并占据王位的妖魔，后者原来是文殊菩萨的坐骑，奉佛旨来报前仇。</p>
    <p>抵号山，遇圣婴大王红孩儿，三藏遇难，行者、八戒等救师屡为妖败。红孩儿为行者早年的结拜兄弟牛魔王之子，行者变化为牛魔王进洞搭救三藏亦未果，为红孩儿三昧真火所败。最后得观音助解救之。观音收伏红孩儿，为善财童子。</p>
    <p>过黑河，遇小鼍龙。三藏被困水底。行者请来龙王收伏之。</p>
    <p>抵车迟国，遇虎力、鹿力、羊力三妖。行者、八戒、沙僧夜闹三清观；戏谑三妖。后在宫中与三妖斗法，赌求雨、猜枚，又赌砍头、剖腹、滚油锅，行者皆胜之，除却三妖。</p>
    <p>经通天河，遇观音座前莲花池内成精为妖的金鱼，金鱼作法把唐僧摄入水府。观音赶来，收走金鱼。三藏得老鼋助渡过河。老鼋求三藏代问佛祖何时他可得人身。</p>
    <p>过金兜山，遇独角兕大王，三藏被擒，行者几经恶斗，又请来各方神兵相助，均失利。后得如来指明，请来老君收伏之。原来妖精为老君坐骑青牛。</p>
    <p>至西梁女国，三藏和八戒饮子母河水而怀孕，行者取落胎泉水解救之。女王欲招赘三藏，行者设计走脱之。但三藏又为毒敌山琵琶洞蝎子精所摄，行者请来昴宿灭之。又在途遇盗，行者除灭之。三藏怪行者杀人，逐之。行者无奈去求诉观音。时三藏遇假行者行凶，并抢走包袱。师徒们以为是行者所为，遣沙僧赶至花果山讨取未果，又赶到南海观音处，忽见行者又在彼，沙僧怒极，经观音说明才罢。行者寻至花果山与假行者恶斗。二行者直斗至如来处。如来说明假行者为六耳猕猴，并除灭之。</p>
    <p>师徒路阻火焰山前。行者打听得有芭蕉扇可克服之，但扇在红孩儿之母、牛魔王之妻罗刹女处。行者赶至罗刹处，先是礼借，后是强索。罗刹因怪行者害红孩儿，只借给假扇。行者又至牛魔王小妾处找牛借，牛不允；行者盗得牛之坐骑，变作牛之模样，至罗刹处骗得芭蕉扇。但半路又被牛魔王赶上变做八戒模样而骗去。后来又借助神兵，与牛魔王恶斗，败之，索得扇子，灭火焰山火。</p>
    <p>至祭赛国，行者为国王除灭盗宝之万圣龙王和九头驸马。</p>
    <p>过荆棘岭，八戒挥钯开路。夜逢竹精树妖。三藏被摄，与妖精谈诗。后被八戒一顿钉钯筑翻妖树。</p>
    <p>到小西天，遇黄眉大王。妖精善使搭包装人。行者请来各路神兵，均不敌。后得弥勒佛相助才降伏，原来妖精乃佛前司磐童儿。</p>
    <p>经驼罗庄，行者和八戒杀蛇精，拯救了一庄老幼。</p>
    <p>经稀柿衕，八戒变大猪拱开满山污路。</p>
    <p>到朱紫国，行者为国王医病，又救回三年前为妖精赛太岁所劫的皇后金圣宫。赛太岁却是观音坐骑金毛狮，特来为国王消灾。</p>
    <p>过盘丝岭，三藏遇蜘蛛精遭难，后者又唆使多目怪蜈蚣精来与三藏师徒作对。行者打死蜘蛛精，又请来毗蓝婆收伏多目怪。</p>
    <p>至狮驼岭，遇青狮、白象、大鹏三魔，三藏遭灾；行者苦斗难胜，去西方求告佛祖。如来宣文殊、普贤降妖，原来狮、象乃二菩萨之坐骑，如来又迫使大鹏皈依。</p>
    <p>比丘国王被寿星坐骑白鹿所化的国丈迷惑，欲用一千一百一十一个小儿心肝做药引，悟空解救婴儿，打退妖怪，寿星赶来收走白鹿怪。</p>
    <p>三藏在松林救一女，却是妖精。师徒夜宿镇海寺，行者降妖，妖精摄走三藏至陷空山无底洞。行者请来哪吒相助，原来此妖乃李天王之义女老鼠精。</p>
    <p>过灭法国，国王要杀一万和尚，正少四名。行者夜间剃尽皇宫内院、五省六部官员之发。迫使国王皈依秉善，并改国名为钦法。</p>
    <p>隐雾山连环洞豹子精南山大王欲吃唐僧肉，被悟空用瞌睡虫睡倒，八戒将其打死。</p>
    <p>经凤仙郡，孙行者见该郡三年未雨，灾情严重，盖因郡主当年推倒斋天素供所致，才劝归善，全郡念佛，感动天降甘霖。</p>
    <p>抵玉华州，行者师兄弟三人收三个王子为徒传艺；仿造金箍棒等兵器。结果兵器为豹头山黄狮精所盗，黄狮精又求助其祖九灵元圣。行者知后者乃太乙救苦天尊坐骑，乃请太乙天尊降伏之。</p>
    <p>过金平府，恰逢元宵节，三藏观灯被青龙曲妖精辟寒大王、辟暑大王、辟尘大王摄去，行者请来四木禽星降灭之，把妖怪斩首示众。</p>
    <p>月宫玉兔化为天竺国公主抛绣球给唐僧，欲招之为婿。悟空会合太阴星君 [66]擒伏玉兔，救回真公主。</p>
    <p>过铜台府地灵县，宿寇员外家，受优厚款待。后寇家被盗，寇员外被害。三藏师徒被诬。行者施法辨明之，又救寇员外还阳。</p>
    <p>三藏师徒终于到达灵山，乘无底船过凌云仙渡，见如来求经。如来命阿傩、伽叶检经传与；阿傩、伽叶向三藏索人事不得，便将无字经本传给三藏。燃灯古佛便命白雄尊者去半路夺经，四众才知真相，返回告于如来。如来却说：经不可轻传。三藏把紫金钵盂送给阿傩，才发出真经五千零四十八卷。如来命八大金刚护送师徒回东土。观音查看三藏所经难簿，共八十难，便命揭谛赶上金刚，再生一难。时三藏等正坠落在通天河边，有老鼋来驮过河。老鼋因怪三藏未曾为他求问佛祖归着之事，便淬下水去，经卷遭水，残缺不全。终于完成了九九八十一难之数。金刚便将师徒们送至长安。</p>
    <p>佛经送回长安，经一十四遍寒暑，太宗喜接得唐僧师徒，因作《圣教序》以彰唐僧之功。唐僧正在雁塔寺登台诵经，被金刚导引，师徒四人并白马复转灵山。四人真身重返灵山听封：三藏被封旃檀功德佛；悟空为斗战胜佛；八戒为净坛使者；沙僧为金身罗汉；白龙马为八部天龙，各归本位。孙悟空头上紧箍也自行消失。</p>
    <div class="myblog">
        欢迎阅读本文章，更多内容请扫码关注我的博客！
        <div class="qr-code"><img src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406231100021.png" alt="我的二维码"></div>

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

实现效果如下：

3.6.3 粘性定位的应用

如下代码是粘性定位示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <style>
        .outer{
            height: 300px;
            width: 150px;
            background-color: #eee;
            overflow: auto;
        }
        .content{
            height: 1200px;
        }
        .header,.item div{
            height: 30px;
            background-color: rgb(89, 223, 44);
            text-align: center;
            line-height: 30px;
        }
        .header{
            position:sticky;
            top:0;
            z-index: 10;
        }
        .item div{
            background-color: blueviolet;
            color: #fff;
            /* 设置粘性定位,设置后必须给位置 */
            position:sticky;
            top: 30px;
        }
        .item span{
            display: block;
            padding:5px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="header">通讯录列表</div>
        <div class="content">
            <div class="item">
                <div>A</div>
                <span>Aaron</span>
                <span>Adam</span>
                <span>Abraham</span>
                <span>Albert</span>
                <span>Alexander</span>
                <span>Alexandra</span>
                <span>Angel</span>
            </div>
            <div class="item">
                <div>B</div>
                <span>Baird</span>
                <span>Barnett</span>
                <span>Barry</span>
                <span>Beatrice</span>
                <span>Blanche</span>
                <span>Bonnie</span>
                <span>Brian</span>
                <span>Byron</span>
            </div>
            <div class="item">
                <div>C</div>
                <span>Carl</span>
                <span>Caesar</span>
                <span>Cameron</span>
                <span>Catherine</span>
                <span>Chelsea</span>
                <span>Chris</span>
                <span>Clark</span>
                <span>Connor</span>
            </div>
            <div class="item">
                <div>D</div>
                <span>Daniel</span>
                <span>David</span>
                <span>Deborah</span>
                <span>Derrick</span>
                <span>Diana</span>
                <span>Don</span>
                <span>Donald</span>
            </div>
        </div>
    </div>
</body>
</html>

页面效果如下：

4.伸缩盒模型

4.1基本概念

4.1.1伸缩容器与伸缩项目

**伸缩容器：**开启了flex的元素就是伸缩元素。
- 给元素设置： display:flex 或 display:inline-flex，该元素就变成了伸缩容器。
- display:inline-flex很少使用。
- 一个元素可以同时是：伸缩容器、伸缩项目。
伸缩项目：伸缩容器所有子元素自动成为了伸缩项目。

4.1.2 主轴与侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。

4.1.3 主轴方向

属性名： flex-direction
常用值有：row 、row-reverse、column、column-reverse。具体如下：
- **row ：**主轴方向水平从左到右 —— 默认值。如下图

**row-reverse ：**主轴方向水平从右到左。

**column ：**主轴方向垂直从上到下。

**column-reverse ：**主轴方向垂直从下到上。

**注意：**改了主轴方向，侧轴也随之改变。

4.1.4 主轴换行方式

属性名： flex-wrap
常用值有：nowrap、wrap、wrap。具体如下
- **nowrap：**默认值，不换行。在伸缩容器一行放下所有伸缩项目时，所有的伸缩项目在主轴方向进行压缩。如下图所示，伸缩容器的尺寸是500px×500px，每个伸缩项目是100×100px，默认不换行会压缩。

**wrap：**自动换行。伸缩容器尺寸不够时自动换行，如下图所示：

**wrap-reverse：**反向换行。如下图所示：

4.1.5 flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要

求。

4.1.6 主轴对齐方式

属性名： justify-content
常用值有： flex-start 、flex-end、center、space-between 、space-around、space-evenly。
- flex-start ：主轴起点对齐。—— 默认值

flex-end ：主轴终点对齐。

center ：居中对齐。

space-between ：均匀分布，两端对齐。

space-around ：均匀分布，两端距离是中间距离的一半。

space-evenly ：均匀分布，两端距离与中间距离一致。

4.1.7 侧轴对齐方式

侧轴对齐方式分为一行和多行两种不同的情况。

一行情况
- 所需属性： align-items
- 常用值有：flex-start、flex-end、center、baseline、stretch

**flex-start ：**侧轴的起点对齐。

**flex-end ：**侧轴的终点对齐。

center ：侧轴的中点对齐。

baseline : 伸缩项目的第一行文字的基线对齐。

没有文字的情况：

有文字的情况：

stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。（默认值）如果设置了高度，效果与flex-start一致。

多行情况：
- 所需属性：align-content
- 常用值有：flex-start、flex-end、center、space-between、space-around、space-evenly、stretch。
  
  具体如下：
  
  **flex-start ：**与侧轴的起点对齐。
  
  **flex-end ：**与侧轴的终点对齐。
  
  **center ：**与侧轴的中点对齐。
  
  **space-between ：**与侧轴两端对齐，中间平均分布。
  
  **space-around ：**伸缩项目间的距离相等，比距边缘大一倍。
  
  **space-evenly : **在侧轴上完全平分。
  
  **stretch ：**如果伸缩项目在侧轴方向未设置尺寸，则占满整个侧轴。默认值。

5.多列布局

专门用于实现类似于报纸的布局。
常用属性如下：

**column-count ：**指定列数，值是数字。*指定列数，会自动计算列宽。

**column-width ：**指定列宽，值是长度。*指定列宽，会自动计算列数。

columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。（不推荐使用）

**column-gap ：**设置列边距，值是长度。

column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。

column-rule-width ：设置列与列之间边框的宽度，值是长度。

column-rule-color：设置列与列之间边框的颜色。

**column-rule ：**设置列边框，复合属性。

column-span： 指定是否跨列；值: none 、 all 。需要给要跨列的元素设置，不是给容器设置。

多列布局案例一，如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列布局-文本</title>
    <style>
        .outer{
            width: 1000px;
            margin: 0 auto;
            background-color: aliceblue;
            text-indent: 2em;
            padding: 20px;

            /* 多列布局 */
            column-count: 4;
            column-rule:2px dashed #332323;           
        }
        h2{
            text-align: center;
            font-size: 30px;
            /* 设置跨列 */
            column-span:all;
        }
        img{
            /* 设置宽度100%，是所在列的宽度 */
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="outer">
        <h2>西游记简介--选自百度百科字条</h2>
        <p>东胜神洲傲来国海边有一花果山，山顶一石，受日月精华，产下一个石猴。石猴勇探瀑布飞泉，发现水帘洞，被众猴奉为“美猴王”。猴王领群猴在山中自由自在数百载，偶闻仙、佛、神圣三者可躲过轮回，与天地山川齐寿，遂独自乘筏泛海，历南赡部洲，至西牛贺洲，终在灵台方寸山斜月三星洞，为菩提祖师收留，赐其法名孙悟空。悟空在三星洞悟彻菩提妙理，学到七十二般变化和筋斗云之术后返回花果山，一举灭妖魔混世魔王，花果山狼、虫、虎、豹等七十二洞妖王都来奉其为尊。</p>
        <p>孙悟空占山为王，号为美猴王。苦于无兵刃，遂去东海龙宫求取，东海龙王敖广及其兄弟送给他一支如意金箍棒及一身披挂。又与牛魔王、蛟魔王、鹏魔王、狮驼王、猕猴王、禺狨王等结为兄弟，日逐讲文论武，弦歌欢舞。一日被阴司按勾去，遂大闹幽冥，于生死簿上勾去所有猴属之名。龙王、地藏王上天庭告状，太白金星建议招安孙悟空，玉帝准奏。</p>
        <p>玉帝封孙悟空做“弼马温”，着他看管马匹。孙悟空后得知此官职卑微，大怒，打出南天门，回花果山，自封为“齐天大圣”，其他几个兄弟也分别自称了平天大圣、覆海大圣、混天大圣、移山大圣、通风大圣、驱神大圣。</p>
        <p>托塔天王李靖及哪吒三太子奉旨兴师捉拿孙悟空，被孙悟空打败，回天庭复旨。太白金星奏请玉帝降旨封孙悟空为齐天大圣，但不给他事务与俸禄。玉帝准奏。孙悟空应太白金星之邀，再入天宫。玉帝封其为齐天大圣，并赐予他齐天大圣府。孙悟空在天上无事，每日交朋结义，不论尊卑。玉帝怕他闲中生事，让其看管蟠桃园。王母举办蟠桃盛会，孙悟空怪王母未请其赶会，竟闯至会上，饱吃仙酒佳肴，又至兜率宫，吃尽金丹；搅乱蟠桃会后，逃回花果山后，玉帝派十万天兵擒拿，未胜。</p>
        <img src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406242156946.webp" alt=""/>
        <p>观音菩萨推荐二郎神助战。悟空和二郎各显神通：多般变化，难分胜负；老君掷金钢琢打倒悟空，哮天犬咬住悟空方被擒。玉帝令天神将其处死，刀砍枪刺，雷击火燃，孙悟空却毫发无损。太上老君将其关入八卦炉，孙悟空不但不死，还炼就一双火眼金睛。四十九天后，悟空推翻八卦炉，舞金箍棒，乱天宫。诸天将不能敌，玉帝只得请来西天佛祖。如来法力无边，悟空无法跳出其手心，被压于五行山下，饮餐铁丸、渴饮铜汁度日。</p>
        <p>五百年后，如来因南赡部洲之人贪淫乐祸，多杀多争，令观音菩萨去东土觅一人，来西天取经，以普渡众生，并赐箍儿三个作降妖用。观世音菩萨携木叉行者往东土寻取经人，路上收服两个妖魔：一个原为灵霄殿下侍銮舆的卷帘大将，因失手打破玻璃盏，被玉帝贬在流沙河受苦；一个本是天河里的天蓬元帅，因带酒戏嫦娥，被打下凡尘投胎为猪形，在福陵山云栈洞为妖。观音替他们取法名沙悟净和猪悟能，叫他们等取经人来，保护取经人西去。观音又请玉帝饶恕犯法的西海龙王之子，将其送于深涧中，只等取经人来，为取经人作个脚力。</p>
    </div>
</body>
</html>

页面效果如下：

多列布局案例二，如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer{
            width: 1000px;
            padding: 10px;
            margin: 0 auto;
            /* 多列布局 */
            column-count: 4;
        }
        img{
            /* 设置宽度100% */
            width: 100%;
            margin: 5px;
            /* 设置过渡 */
            transition: all 0.3s;
            cursor: pointer;
        }
        img:hover{
            box-shadow: 0 0 10px black;
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="outer">
        <!-- https://www.umei.cc/bizhitupian/keaibizhi/ -->
        <img alt="" src="https://www.umei.cc/d/file/20230907/f43b21d30b87c27c9351c4d11111484a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/b2619d00d56285ca20132a84ebe63913.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/09e2d479d203d0e6d68c263bfe95376e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/bbb5966803bc556964a10e7fc8c9c81b.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230725/56cf448e15ba073474f9744c786a5e11.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/9de359763fca1451f96940aa7f637942.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230901/3922c4fb1536b09bd7f6f251b6f94259.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/35f17b7cbcd2551208bf7bf4c1761207.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/123278bf28cfb309f0e0d9fe0ccca671.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230911/97231589fa06daaaa2ae66536adecd22.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/87fe5b297653f08a4aabd904a123adc2.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/01e8ace5ba2f0f9f5cbdb25a85abbd02.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230601/553a60270dddfad100071962e4559406.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230616/2c1c6e0b25bbd51dad8ecca7926c7b49.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/ad3c1b98457e9b2b4ff3650acc1edc4e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/71b2bc11d55741e1fe099a6b90d3cb34.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/1e710931e7cca4d957294da1e8c1249a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/b3c7b62b9fac98d1eeb72ba7eef830aa.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/f43b21d30b87c27c9351c4d11111484a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/b2619d00d56285ca20132a84ebe63913.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/09e2d479d203d0e6d68c263bfe95376e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/bbb5966803bc556964a10e7fc8c9c81b.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230725/56cf448e15ba073474f9744c786a5e11.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/9de359763fca1451f96940aa7f637942.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230901/3922c4fb1536b09bd7f6f251b6f94259.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/35f17b7cbcd2551208bf7bf4c1761207.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/123278bf28cfb309f0e0d9fe0ccca671.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230911/97231589fa06daaaa2ae66536adecd22.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/87fe5b297653f08a4aabd904a123adc2.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/01e8ace5ba2f0f9f5cbdb25a85abbd02.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230601/553a60270dddfad100071962e4559406.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230616/2c1c6e0b25bbd51dad8ecca7926c7b49.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/ad3c1b98457e9b2b4ff3650acc1edc4e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/71b2bc11d55741e1fe099a6b90d3cb34.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/1e710931e7cca4d957294da1e8c1249a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/b3c7b62b9fac98d1eeb72ba7eef830aa.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/f43b21d30b87c27c9351c4d11111484a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/b2619d00d56285ca20132a84ebe63913.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/09e2d479d203d0e6d68c263bfe95376e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/bbb5966803bc556964a10e7fc8c9c81b.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230725/56cf448e15ba073474f9744c786a5e11.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/9de359763fca1451f96940aa7f637942.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230901/3922c4fb1536b09bd7f6f251b6f94259.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/35f17b7cbcd2551208bf7bf4c1761207.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230822/123278bf28cfb309f0e0d9fe0ccca671.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230911/97231589fa06daaaa2ae66536adecd22.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230907/87fe5b297653f08a4aabd904a123adc2.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230908/01e8ace5ba2f0f9f5cbdb25a85abbd02.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230601/553a60270dddfad100071962e4559406.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230616/2c1c6e0b25bbd51dad8ecca7926c7b49.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/ad3c1b98457e9b2b4ff3650acc1edc4e.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/71b2bc11d55741e1fe099a6b90d3cb34.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230914/1e710931e7cca4d957294da1e8c1249a.jpg">
        <img alt="" src="https://www.umei.cc/d/file/20230913/b3c7b62b9fac98d1eeb72ba7eef830aa.jpg">
    </div>
</body>
</html>