三、装修
购买课程页面
看我们的设计图 外层有一个墙壁包裹则我们的一些家具 由于之前我们已经将家具的调料都买好了我们可以直接用了(说的是CSS文件、CSS文件、CSS文件、重要的事情说三遍‼️‼️‼️)
- 红色家具: 标题
- 粉色家具: 自定义一些介绍
- 蓝色家具: 选择对应的方块用来支付
- 绿色家具: 选择什么方式来支付
安装红色家具
编写最外层盒子、在编写一个墙壁盒子 container-wall
装修了墙壁 设置了背景颜色、墙壁周围的阴影、内边距 上下为30像素 左右 80像素
<div class="app-container"> <div class="container-wall"> <header> <h2> <span>课程列表</span> </h2> </header> </div> </div>
<style scoped lang="scss"> .container-wall { background-color: var(--el-bg-color); box-shadow: 0 0 60px 0 rgb(392 390 288 / 70%); padding: 30px 80px; } </style>
安装粉色家具
看样子旁边有个扶手 后面跟着部分信息
我们就先把主体搞出来
<div class="app-container"> <div class="container-wall"> <header> <h2> <span>课程列表</span> </h2> </header> <!-- 墙壁的广告~ --> <div class="container-wall-advertisement"> 本案例使用Native模式拉取二维码用户进行微信扫码支付指定商品操作。 </div> </div> </div>
<style scoped lang="scss"> .container-wall { background-color: var(--el-bg-color); box-shadow: 0 0 60px 0 rgb(392 390 288 / 70%); padding: 30px 80px; .container-wall-advertisement { margin-top: 10px; color: red; margin-bottom: 10px; font-size: 14px; height: auto !important; position: relative; padding-left: 30px; line-height: 25px; font-weight: 500; } } </style>
设置了头部外边距10像素 颜色红色 等
编写扶手 使用伪类直接造一个出来
设置子级设置绝对定位父元素设置相对 (子绝父相) position: relative / absolute;
container-wall-advertisement:before { content: ""; display: block; position: absolute; left: 0; top: calc(50% - 10px); width: 4px; height: 18px; background: #fa8919; border-radius: 0 4px 4px 0; }
安装蓝色家具
可以看到蓝色家具当中都是一样的我们只需要搞好一个其他的直接复制即可
编写一个盒子用来包裹
盒子内部咱们使用有序标签来搞 ul标签 li 标签
同学们根据图片编写出来
效果就是这样子的
ok我们进行装修 把它 摆正 并且 有边框 包裹 有颜色 如下
给 container-wall-content 盒子 下面的 li 标签 进行装修
设置一个名为 .container-wall-content li 的选择器的样式，该选择器应用于HTML文档中的列表项元素（<li>）在特定的容器（.container-wall-content）内。以下是每个属性的中文解释：
1.border: 2px solid #f3e2c6;
- 解释：设置边框样式为2像素宽度的实线边框，边框颜色为淡色 #f3e2c6。
2.background-color: #ffffff;
- 解释：设置背景颜色为白色 #ffffff。
3.color: #f39800;
- 解释：设置文字颜色为橙色 #f39800。
4.border-radius: 5px;
- 解释：设置边框的圆角半径为5像素，使边框角变得圆润。
5.width: 170px;
- 解释：设置元素的宽度为170像素。
6.height: 60px;
- 解释：设置元素的高度为60像素。
7.line-height: 60px;
- 解释：设置行高为60像素，使文字在垂直方向上居中显示。
8.font-size: 20px;
- 解释：设置文字的字体大小为20像素。
9.text-align: center;
- 解释：设置文字在元素内水平居中对齐。
10.text-decoration: none;
- 解释：移除文字的下划线装饰。
- 11.cursor: pointer;
- 解释：将鼠标指针形状设置为手型，表示该元素是可点击的。
12.display: inline-block;
- 解释：将元素的显示类型设置为 inline-block，使其既具有行内元素的特性（可以在同一行显示多个元素），又具有块级元素的特性（可以设置宽度、高度等属性）。
13.margin: 10px 10px;
- 解释：设置元素的外边距（margin）为10像素上下和10像素左右，这会在元素周围创建一段空白区域，增加元素与其他元素之间的间距。
定义了一个具有边框、背景色、文字颜色和其他样式的列表项样式，用于在容器内的特定情境中显示。
查看效果 好看好看好看~
选中状态的差异
如图表示右边的是粉色(选中状态)
自定义一个样式
.container-wall-content li.current 定义了一个针对选中状态的样式，这个样式将应用于具有特定类名的<li>元素，即带有current类的<li>元素。让我逐条解释其中的属性和值的含义：
1.border: 2px solid #f89898;
这行代码设置了一个2像素宽的边框，颜色为 #f89898，这是一种浅红色。这个边框将会围绕在被应用此样式的元素周围。
2.background-color: #ffffff;
这行代码将背景颜色设置为白色，即 #ffffff。
3.color: #f89898;
这行代码设置文本颜色为 #f89898，与上面边框的颜色相同，以保持颜色一致。
4.font-weight: bold;
这行代码将文本字重设置为粗体，使文本在选中状态下更加显眼。
因此，这个样式的效果是，在选中状态下，带有current类的<li>元素将拥有一个红色的粗边框，白色的背景，红色的文本，并且文本会以粗体显示。这样的设计通常用于在用户界面中突出显示当前活动的或者被选中的项目。
使用方式
直接在 li 标签上面新增一个 样式名称
安装绿色家具
可以看到这里面的东西和上面差不多我呢直接写好了同学们直接打出来吧
同学们自己打出来哦 class 名称要一样因为css配置文件是定义的这些名称
查看效果 好看好看好看~
安装按钮
打开 ElementPlus文档 挑选觉得好看的直接安排
样式设置右边
.container-wall-btn { text-align: right; }
最终装修效果
