1.二维码页面的结构设计
定义列表
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。定义列表以<dl>...</dl> 构建列表容器，其中包含定义项目和解释体两部分，定义项目使用<dt>...</dt>作用，每个定义项目的解释体可以一个或多个<dd>...</dd>作用。 其语法格式如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
用法示例：
<dl>
<dt>红色</dt>
<dd>可见光谱中长波末端的颜色。</dd>
<dd>是光的三原色和心理原色之一。</dd>
<dd>表着吉祥、喜庆、热烈、奔放、激情、斗志、革命。</dd>
<dd>红色的补色是青色。</dd>
</dl>
运行效果如下：
span标签
span标签是一个行内标记。常用于定义网页中某些特殊显示的文本。 行内标签不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。 <span>与</span>之间只能包含文本和各种行内标记。
编程任务
对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性， 具体要求是：
在
<body>...</body>中使用定义表标签（dl）来定义内容。定义项目使用
<dt>...</dt>作用，其间的内容为空。定义的解释体由四部分组成：
width:170px;
height:270px;
padding:10px;
margin:10px;
border:10px solid #f1e9e9;（1)第一部分使用
<dd>...</dd>标签作用文字“李刚 广告公司”，其中文字“李刚”使用span标签作用，设置类名为“poo1”，文字“广告公司”使用span标签作用，设置类名为“poo2”
（2）第二部分使用<dd>...</dd>标签作用文字“晋级：网页设计师”
（3）第三部分使用<dd>...</dd>标签作用文字“案例：41个”
（4）第四部分使用<dd>...</dd>标签作用文字“经验：4年”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
</head>
<body>
<!-- ********* Begin ********* -->
<dl>
<dd>
<span class="poo1">李刚</span>
<span class="poo2">广告公司</span>
</dd>
<dd>晋级：网页设计师</dd>
<dd>案例：41个</dd>
<dd>经验：4年</dd>
</dl>
<!-- ********* End ********* -->
</body>
</html>
2.二维码页面的样式设计
编程任务及效果
对右侧编辑器中的Begin - End区域的文字内容补充样式规则，以实现下面的页面效果。
具体要求
使用群组选择器，对
<body>、<dl>、<dt>、<dd>标签中的内容进行样式设置。将外边距和内边距值设置为0，并将边框线宽设置为0对
<dl>标签进行样式设置：
内容区宽度设置为170px，高度设置为270px
内边距设置为10px,外边距设置为10px
边框线宽设置为10px，线样式设置为单实线，边框线颜色设置为#f1e9e9
- 对
<dt>标签进行样式设置：
- 内容区宽度设置为170px，高度设置为162px
- 背景图设置不平铺，背景图的水平定位值设置为-17px,垂直方向定位值设置为center
- 底部外边距设置为5px
- 对
<dd>标签进行样式设置：
- 内容区宽度设置为170px，高度设置为26px
- 文本行高设置为26px,文本颜色设置为#999
- 左内边距设置为5px
- 对类名为poo1的元素进行样式设置。
- 使文本字体粗细设置为bold
- 使文字大小设置为16px
- 对类名为poo2的元素进行样式设置。使文字大小设置为12px
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
<!-- ********* Begin ********* -->
<style type=text/css>
body,dl,dt,dd{
margin:0;
padding:0;
border:0;
}
dl{
width:170px;
height:270px;
padding:10px;
margin:10px;
border:10px solid #f1e9e9;
}
dt{
width:170px;
height:162px;
background:url(https://www.educoder.net/api/attachments/2032559) no-repeat -17px center;
margin-bottom:5px;
}
dd{
width:170px;
height:26px;
line-height:26px;
color:#999;
padding-left:5px;
}
.poo1{
font-weight:bold;
font-size:16px;
}
.poo2{
font-size:12px;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<dl>
<dt></dt>
<dd><span class="poo1">李刚</span> <span class="poo2">广告公司</span></dd>
<dd>晋级：网页设计师</dd>
<dd>案例：41个</dd>
<dd>经验：4年</dd>
</dl>
</body>
</html>