前言
今天我们来学习：WEUI-Panel组件！
我们将会实现这样一个效果:
话不多说！我们直接开始！！
正文
我要实现这样的一个组件，我们要编写4个文件panel.html,reset.css,bass.css,panel.css
实现panel.html文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> WEUI源码之Panel组件</title>
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./panel.css">
<style>
.box{
width: 100px;
height: 100px;
/* border: 2px solid red; */
/* background-color: red; */
/* 轮廓 看过去和border 一样,但是不占空间 */
/* outline: 2px solid red; */
}
</style>
</head>
<body>
<div class="page">
<!-- .page__hd+.page__bd '+'为选择器 -->
<div class="page__hd">
<!-- page__title是一个标签类名，相对于整个page -->
<h1 class="page__title">Panel</h1>
<p class="page__desc">面板</p>
</div>
<div class="page__bd">
<!-- Panel组件 -->
<div class="weui-panel">
<div class="weui-panel__hd">
图文组合列表
</div>
<div class="weui-panel__bd">
<!-- 开始了一个新的media-box组件,小组件构成大组件 -->
<a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<!-- src里面放的是一种编码,几kb左右，这个更小，1kb或者更小 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" class="weui-media-box__thumb">
</div>
<div class="weio-media-box__bd">
<strong class="weui-media-box__title">标题一</strong>
<p class="weui-media-box__desc">
由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道
</p>
</div>
</a>
<a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<!-- src里面放的是一种编码,几kb左右，这个更小，1kb或者更小 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" class="weui-media-box__thumb">
</div>
<div class="weio-media-box__bd">
<strong class="weui-media-box__title">标题二</strong>
<p class="weui-media-box__desc">
由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道
</p>
</div>
</a>
<div class="weui-panel__ft">
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_access weui-cell_link">
<span class="weui-cell__bd">查看更多</span>
<span class="weui-cell__ft"></span>
</a>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">小图文组合列表</div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
<a aria-labelledby="t1 t2" class="weui-cell weui-cell_active weui-cell_access weui-cell_example" href="javascript:">
<div aria-hidden="true" id="t1" class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt=""></div>
<div aria-hidden="true" id="t2" class="weui-cell__bd weui-cell_primary">
<p>文字标题</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a aria-labelledby="t3 t4" class="weui-cell weui-cell_active weui-cell_access weui-cell_example" href="javascript:">
<div aria-hidden="true" id="t3" class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt=""></div>
<div aria-hidden="true" id="t4" class="weui-cell__bd weui-cell_primary">
<p>文字标题</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">文字列表附来源</div>
<div class="weui-panel__bd">
<div role="link" aria-labelledby="js_p4m1_title js_a11y_comma js_p4m1_desc" aria-describedby="js_p4m1_source js_a11y_comma js_p4m1_time js_a11y_comma js_p4m1_extra" class="weui-media-box weui-media-box_text">
<strong aria-hidden="true" class="weui-media-box__title" id="js_p4m1_title">标题一</strong>
<p class="weui-media-box__desc" aria-hidden="true" id="js_p4m1_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
<ul class="weui-media-box__info" aria-hidden="true">
<li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_source">文字来源</li>
<li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_time">时间</li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra" aria-hidden="true" id="js_p4m1_extra">其它信息</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</html><div class="page">：这个标签定义了一个页面（Page）的容器。<div class="page__hd">：这个标签定义了页面的头部（Header）。<h1 class="page__title">Panel</h1>：这个标签定义了页面头部的标题，显示为 "Panel"。<p class="page__desc">面板</p>：这个标签定义了页面头部的描述，显示为 "面板"。<div class="page__bd">：这个标签定义了页面的主体部分（Body）。<div class="weui-panel">：这个标签定义了一个面板组件。<div class="weui-panel__hd">：这个标签定义了面板的头部（Header）。- 接下来的文本 "图文组合列表" 是显示在面板头部的内容。
<div class="weui-panel__bd">：这个标签定义了面板的主体部分（Body）。<a href="javascript:;" class="weui-media-box weui-media-box_appmsg">：这个标签定义了一个链接，该链接包含在一个weui-media-box类的 div 中。- 在链接中，有一个
weui-media-box__hd类的 div，其中包含一个 img 标签，img 标签的src属性中包含一个图片的编码。 - 在链接中，还有一个
weio-media-box__bd类的 div，其中包含一个标题和一个描述文本。 div class="weui-panel__ft">：这行代码定义了一个<div>元素，该元素的类名为weui-panel__ft。这个类名是来自微信小程序UI组件库WeUI的一个面板（Panel）组件的一部分。<a href="javascript:" class="weui-cell weui-cell_active weui-cell_access weui-cell_link">：这行代码定义了一个<a>元素，该元素的类名为weui-cell weui-cell_active weui-cell_access weui-cell_link。这个元素是一个链接，由于href="javascript:"，这个链接不会导向其他页面，而是触发一个JavaScript事件。<span class="weui-cell__bd">查看更多</span>：这行代码定义了一个<span>元素，该元素的类名为weui-cell__bd，显示的内容为"查看更多"。<div class="weui-panel">：开始一个weui-panel元素，该元素是一个面板（Panel）组件。<div class="weui-panel__hd">小图文组合列表</div>：在面板的头部（header）添加一个标题，内容为"小图文组合列表"。<div class="weui-panel__bd">：在面板的主体（body）部分开始。<div class="weui-media-box weui-media-box_small-appmsg">：创建一个媒体盒子，用于显示图片和文本信息。<div class="weui-cells">：创建一个包含多个单元格（cell）的集合。- 接下来的两个
<a>元素代表两个单元格。每个单元格都包含一个图片、一个标题和一个链接。这些单元格都使用了weui-cell、weui-cell_active、weui-cell_access和weui-cell_example这些类 - 在每个单元格中，
<img src="" alt="">用于显示图片，<p>文字标题</p>用于显示标题，而href="javascript:"则表示这个链接不会导向其他页面,用于触发一个JavaScript事件。 <div class="weui-panel">：开始一个weui-panel元素的定义，该元素通常用于显示一个面板或对话框。<div class="weui-panel__hd">文字列表附来源</div>：在面板的头部（header）添加一个标题，内容为"文字列表附来源"。<div class="weui-panel__bd">：在面板的主体（body）部分开始。<div role="link" aria-labelledby="js_p4m1_title js_a11y_comma js_p4m1_desc" aria-describedby="js_p4m1_source js_a11y_comma js_p4m1_time js_a11y_comma js_p4m1_extra" class="weui-media-box weui-media-box_text">：定义一个可点击的链接元素，它包含一些文本信息和相关来源的描述。这些信息通过ARIA属性进行标识和关联。<strong aria-hidden="true" class="weui-media-box__title" id="js_p4m1_title">标题一</strong>：定义一个标题文本，内容为"标题一"。<p class="weui-media-box__desc" aria-hidden="true" id="js_p4m1_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>：定义一个段落文本，内容为对星球的描述。<ul class="weui-media-box__info" aria-hidden="true">：定义一个无序列表，用于包含文字来源、时间和额外信息等条目。<li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_source">文字来源</li>：定义一个列表项，用于显示文字来源的信息。<li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_time">时间</li>：定义一个列表项，用于显示时间信息。<li class="weui-media-box__info__meta weui-media-box__info__meta_extra" aria-hidden="true" id="js_p4m1_extra">其它信息</li>：定义一个列表项，用于显示额外信息。
注意 ：在我们插入图片的时候我们引用的是data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="" class="weui-media-box__thumb这是一段Base64编码的PNG图片数据.
实现reset.css文件
这个文件相当简单，我们只需要利用它初始化一个我们的全局边距即可!
css
*{
margin: 0;
padding: 0;
/* 不同的浏览器margin不同，为了保持不同的浏览器体验一样 */
outline: 0 ;/* input a 聚焦时或者高亮时用 重置样式，让样式无差别*/
/* 把总大小变为content大小 */
/* box-sizing: border-box; 盒子模型方式切换*/
}实现Panel.css文件
css
/* 面板组件 */
.weui-panel{
background-color: var(--weui-BG-2);
margin-top: 10px;
position: relative;
/* 超出隐藏,不要有滚动框 */
overflow: hidden;
}
/*.weui-panel:first-child 选中的是一类元素,所有的weui-panel的第一个,如果是第一个没必要margin-top 0, */
/* 其余的会和前面的panel 有个margin-top 如果：和英文之间加了空歌 */
/* .weuipanel */
.weui-panel:first-child{
margin-top: 0px;
}
.weiui-panel__hd{
padding: 16px 16px 13px;
color: var(--weui-FG-0);
font-size: 15px;
font-weight: 500;
position: relative;
}在这一段代码中
.weui-panel的背景色被设置为--weui-BG-2，这是一个CSS变量，通常在HTML元素的class或id选择器中定义。margin-top: 10px;表示这个元素的上边距为10像素。position: relative;表示这个元素的位置相对于其正常位置进行定位。overflow: hidden;表示如果这个元素的内容超出其边界，那么超出的部分会被隐藏，不会出现滚动条。.weui-panel:first-child是选择所有.weui-panel的第一个元素。这里将它的margin-top设置为0，也就是说，如果这个元素是.weui-panel类的第一个元素，那么它的上边距将被设置为0。.weui-panel__hd是.weui-panel的一个子元素，可能是一个header或者标题部分。这个元素的padding被设置为16px 16px 13px，也就是说，这个元素的上、左右、下都有填充。color被设置为--weui-FG-0，这同样是一个CSS变量，通常在HTML元素的class或id选择器中定义。font-size被设置为15px，font-weight被设置为500，表示字体大小和粗细。position: relative;表示这个元素的位置相对于其正常位置进行定位。
实现base.css文件
css
.page{
/* 手机滚屏阅读的常见操作！ */
/* 移动端的占满整个页面写法 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* bfc属性，很重要,超出则滚动 */
overflow-y: auto;
/* 让滚动如丝般顺滑 css考点 和手touch粘合 手机端浏览器 */
/* 移动端浏览器内核前缀都是-webkit
overflow-scrolling在实验阶段
*/
-webkit-overflow-scrolling: touch;
/* 把盒子模型设置为IE盒子模型 */
box-sizing: border-box;
z-index: 1;
}
body{
/* 格式以--开始 */
--weui-BG-0:rgb(17, 241, 253);
/* 方便统一更改 管理 利用 皮肤更换 */
--weui-FG-1:rgb(0, 0, 0);
--weui-BG-2:rgb(17, 241, 253);
}
.page,body{
/* weui技术很激进 css4的变量 */
background-color: var(--weui-BG-0);
}
body{
color: rgba(7, 2, 2, 0.8);
}
.page__hd{
margin-top: 10px;
padding: 40px;
width: 50px;
height: 50px;
background-color: rgb(13, 193, 13);
}
.page__title{
text-align: left;
font-size: 20px;
font-weight: 400;
}
.page__desc{
margin-top: 4px;
/* 文字的背景颜色，新的变量,方便统一修改 */
color: var(--weui-FG-1);
text-align:left;
font-size: 14px;
}
.page__bd{
padding-bottom: 20px;
}这一段代码：
.page：这个类定义了一个页面样式，它被设置为绝对定位，并占据整个屏幕。通过设置overflow-y: auto;，当内容超出页面的高度时，会出现滚动条。-webkit-overflow-scrolling: touch;是为了让滚动更加平滑。box-sizing: border-box;是让元素的边框和内边距都包含在元素的总宽度内。z-index: 1;是设置元素的堆叠顺序。body：这个元素定义了一些背景颜色和字体颜色。其中，--weui-BG-0,--weui-FG-1和--weui-BG-2是CSS变量，用于存储颜色值，方便统一修改和管理。.page,body：这两者都设置了背景颜色，分别是--weui-BG-0和--weui-BG-2。.page__hd：这个类定义了页面头部的样式，其中padding: 40px;是设置元素的内边距。.page__title：这个类定义了页面标题的样式，包括文字对齐方式、字体大小和粗细。.page__desc：这个类定义了页面描述的样式，包括上边距、文字颜色、对齐方式和字体大小。.page__bd：这个类定义了页面主体的样式，其中padding-bottom: 20px;是设置元素的下边距。
最后，我们实现的效果
如果大家有任何想法和指正！欢迎大家留言!!点个小赞支持鼓励一下吧！🌹🌹🌹