WEUI-Pannel组件源码学习-如何实现一个WEUI-Pannel组件？WEUI-Pannel组件学习分析

路修远i2023-11-03 10:57

前言

今天我们来学习：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>
  1. <div class="page">：这个标签定义了一个页面（Page）的容器。
  2. <div class="page__hd">：这个标签定义了页面的头部（Header）。
  3. <h1 class="page__title">Panel</h1>：这个标签定义了页面头部的标题，显示为 "Panel"。
  4. <p class="page__desc">面板</p>：这个标签定义了页面头部的描述，显示为 "面板"。
  5. <div class="page__bd">：这个标签定义了页面的主体部分（Body）。
  6. <div class="weui-panel">：这个标签定义了一个面板组件。
  7. <div class="weui-panel__hd">：这个标签定义了面板的头部（Header）。
  8. 接下来的文本 "图文组合列表" 是显示在面板头部的内容。
  9. <div class="weui-panel__bd">：这个标签定义了面板的主体部分（Body）。
  10. <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">：这个标签定义了一个链接，该链接包含在一个 weui-media-box 类的 div 中。
  11. 在链接中，有一个 weui-media-box__hd 类的 div，其中包含一个 img 标签，img 标签的 src 属性中包含一个图片的编码。
  12. 在链接中，还有一个 weio-media-box__bd 类的 div，其中包含一个标题和一个描述文本。
  13. div class="weui-panel__ft">：这行代码定义了一个<div>元素，该元素的类名为weui-panel__ft。这个类名是来自微信小程序UI组件库WeUI的一个面板（Panel）组件的一部分。
  14. <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事件。
  15. <span class="weui-cell__bd">查看更多</span>：这行代码定义了一个<span>元素，该元素的类名为weui-cell__bd，显示的内容为"查看更多"。
  16. <div class="weui-panel">：开始一个weui-panel元素，该元素是一个面板（Panel）组件。
  17. <div class="weui-panel__hd">小图文组合列表</div>：在面板的头部（header）添加一个标题，内容为"小图文组合列表"。
  18. <div class="weui-panel__bd">：在面板的主体（body）部分开始。
  19. <div class="weui-media-box weui-media-box_small-appmsg">：创建一个媒体盒子，用于显示图片和文本信息。
  20. <div class="weui-cells">：创建一个包含多个单元格（cell）的集合。
  21. 接下来的两个<a>元素代表两个单元格。每个单元格都包含一个图片、一个标题和一个链接。这些单元格都使用了weui-cell、weui-cell_active、weui-cell_access和weui-cell_example这些类
  22. 在每个单元格中，<img src="" alt="">用于显示图片，<p>文字标题</p>用于显示标题，而href="javascript:"则表示这个链接不会导向其他页面,用于触发一个JavaScript事件。
  23. <div class="weui-panel">：开始一个weui-panel元素的定义，该元素通常用于显示一个面板或对话框。
  24. <div class="weui-panel__hd">文字列表附来源</div>：在面板的头部（header）添加一个标题，内容为"文字列表附来源"。
  25. <div class="weui-panel__bd">：在面板的主体（body）部分开始。
  26. <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属性进行标识和关联。
  27. <strong aria-hidden="true" class="weui-media-box__title" id="js_p4m1_title">标题一</strong>：定义一个标题文本，内容为"标题一"。
  28. <p class="weui-media-box__desc" aria-hidden="true" id="js_p4m1_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>：定义一个段落文本，内容为对星球的描述。
  29. <ul class="weui-media-box__info" aria-hidden="true">：定义一个无序列表，用于包含文字来源、时间和额外信息等条目。
  30. <li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_source">文字来源</li>：定义一个列表项，用于显示文字来源的信息。
  31. <li class="weui-media-box__info__meta" aria-hidden="true" id="js_p4m1_time">时间</li>：定义一个列表项，用于显示时间信息。
  32. <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;
}

在这一段代码中

  1. .weui-panel 的背景色被设置为 --weui-BG-2，这是一个CSS变量，通常在HTML元素的class或id选择器中定义。margin-top: 10px; 表示这个元素的上边距为10像素。position: relative; 表示这个元素的位置相对于其正常位置进行定位。overflow: hidden; 表示如果这个元素的内容超出其边界，那么超出的部分会被隐藏，不会出现滚动条。
  2. .weui-panel:first-child 是选择所有 .weui-panel 的第一个元素。这里将它的 margin-top 设置为0，也就是说，如果这个元素是 .weui-panel 类的第一个元素，那么它的上边距将被设置为0。
  3. .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;
}

这一段代码：

  1. .page：这个类定义了一个页面样式，它被设置为绝对定位，并占据整个屏幕。通过设置overflow-y: auto;，当内容超出页面的高度时，会出现滚动条。-webkit-overflow-scrolling: touch;是为了让滚动更加平滑。box-sizing: border-box;是让元素的边框和内边距都包含在元素的总宽度内。z-index: 1;是设置元素的堆叠顺序。
  2. body：这个元素定义了一些背景颜色和字体颜色。其中，--weui-BG-0, --weui-FG-1 和 --weui-BG-2 是CSS变量，用于存储颜色值，方便统一修改和管理。
  3. .page, body：这两者都设置了背景颜色，分别是 --weui-BG-0 和 --weui-BG-2。
  4. .page__hd：这个类定义了页面头部的样式，其中 padding: 40px; 是设置元素的内边距。
  5. .page__title：这个类定义了页面标题的样式，包括文字对齐方式、字体大小和粗细。
  6. .page__desc：这个类定义了页面描述的样式，包括上边距、文字颜色、对齐方式和字体大小。
  7. .page__bd：这个类定义了页面主体的样式，其中 padding-bottom: 20px; 是设置元素的下边距。

最后，我们实现的效果

如果大家有任何想法和指正！欢迎大家留言!!点个小赞支持鼓励一下吧！🌹🌹🌹

相关推荐
正小安18 分钟前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch2 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光2 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   2 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   2 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web2 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常2 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
赛男丨木子丿小喵2 小时前
visual studio2022添加新项中没有html和css
css·html·visual studio
莹雨潇潇3 小时前
Docker 快速入门（Ubuntu版）
java·前端·docker·容器
Jiaberrr3 小时前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点