005-WebBuilder使用结构元素进行网页布局

article/2025/9/13 11:10:27

这个太零散了直接在代码上写的注释，第一份前端代码

<!DOCTYPE html>
<html> <!--文档基本结构--><head><!--设置section或者page的页眉--><meta charset="utf-8" /><!--meta网页元信息--><title>业务种类</title><!--网页标题--><!--使用结构元素进行网页布局--><!--定义文档的样式信息--><style>.left-list-container{float: left;/*float规定框是否应该浮动，left设置定位元素左外边距边界与其包含块左外边界之间的偏移*/}.left-list-title{margin-bottom: 20px;/*定义元素外边距使用margin属性，可以专门设置某一方向属性，比如margin-bottom:设置元素的下外边距*/}.left-list-header{font-size: 30px;/*字体大小*/color: rgb(16,120,173); /*定义内边距使用padding属性，内边距就是元素包含的内容和元素边框内边沿之间的距离*/padding-left: 8px;/*边框border:任何元素都可以定义边框，并且能够很好地显示出来。边框在网页布局中就是用来分割模块的。*/border-left: 5px solid rgb(16,120,173);}.left-list-footer{font-size: 15px;color: rgb(255,203,0);padding-left: 8px;/*padding是内边距，设置内边距这样我们就有空间可以设置border边框了， soild一个实体边框*/border-left: 5px solid rgb(255,203,0);}.left-list-content{flex: 1;/*让所有弹性盒子对象的子元素都有相同的长度，且忽略他们内部的内容*/width: 200px;/*元素区域宽度*/background-color: rgb(247,247,247);/*背景色*/padding: 0 5px;border: 1px solid rgb(247,247,247);/*定义边框，只要和背景色一样就看不出来*/}.left-list-content-item{display: flex;/*利用display属性控制盒子的类型，flex:多行多列布局方式*/align-items: center;/*元素位于容器的中心，这个没啥用*/font-size: 20px;/*字体大小*/line-height: 25px;/*line-height行高，用来设置行间的距离*/padding: 10px 0;/*上下填充是10px,左右填充是0， 行间距和padding的上下填充感觉重复*/border-bottom: 1px solid rgb(247,247,247);/*定义底部边框，只要背景色一样就看不出来*/}.left-list-content-item:nth-last-child{/*nth-last-child是从最后一个元素开始计算选择特定元素*/border-bottom: 0px solid rgb(247,247,247);}.left-list-icon{/*设置图标大小*/height: 20 px;width: 20 px;}</style></head><body><div class="list-container"><!--div定义文档的节--><div class="left-list-title"><div class="left-list-header">业务种类</div><div class="left-list-footer">Bussiness Type</div></div><ul class="left-list-content"><!--ul定义无序列表--><li class="left-list-content-item"><!--li定义列表的项目--><img src="img/left.jpg" class="left-list-icon"/><!--定义图像--><span class="left-list-content">出入境体检</span><!--定义文档的节--></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">预防接种</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">指定签证体检</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">社会健康体检</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">其他服务</span></li></div><div class="left-list-title"><div class="left-list-header">业务指南</div><div class="left-list-footer">Bussiness Guide</div></div><ul class="left-list-content" ><li class="left-list-content-item"><img src="img/体检流程.jpg" class="left-list-icon"/><span class="left-list-content">体检流程</span></li><li class="left-list-content-item"><img src="img/体检注意事项.jpg" class="left-list-icon"/><span class="left-list-content">体检注意事项</span></li><li class="left-list-content-item"><img src="img/体检结果领取须知.jpg" class="left-list-icon"/><span class="left-list-content">体检结果领取须知</span></li><li class="left-list-content-item"><img src="img/收费标准.jpg" class="left-list-icon"/><span class="left-list-content">收费标准</span></li><li class="left-list-content-item"><img src="img/办公时间.jpg" class="left-list-icon"/><span class="left-list-content">办公时间</span></li><li class="left-list-content-item"><img src="img/预防接种须知.jpg" class="left-list-icon"/><span class="left-list-content">预防接种须知</span></li></div></div></body>
</html>