这个太零散了直接在代码上写的注释，第一份前端代码
<!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>
效果
在webbuilder中的效果
今天基本就是在学习这一份前端代码，自己敲了一遍，放在webBuilder上运行了一下。前端果然复杂呀。
