第1关：二维码名片页面的结构设计
任务描述
本关任务：设置一个二维码名片页面的主体结构。
相关知识
为了完成本关任务，你需要掌握：1.定义表的设置，2.span标签。
定义列表
定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。定义列表以
-
…
其语法格式如下：
-
名词1
- 名词1解释1
- 名词1解释2 ... 名词2
- 名词2解释1
- 名词2解释2 ...
-
红色
- 可见光谱中长波末端的颜色。
- 是光的三原色和心理原色之一。
- 表着吉祥、喜庆、热烈、奔放、激情、斗志、革命。
- 红色的补色是青色。
span标签
span标签是一个行内标记。常用于定义网页中某些特殊显示的文本。
行内标签不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。
与之间只能包含文本和各种行内标记。
编程任务
对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性， 具体要求是：
1.在…中使用定义表标签（dl）来定义内容。
2.定义项目使用
3.定义的解释体由四部分组成：
(1)第一部分使用
（2）第二部分使用
（3）第三部分使用
（4）第四部分使用
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
代码示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计师名片</title>
</head>
<body>
<!-- ********* Begin ********* -->
<dl>
<dt></dt>
<dd><span class="poo1">李刚</span> <span class="poo2">广告公司<span></dd>
<dd>晋级：网页设计师</dd>
<dd>案例：41个</dd>
<dd>经验：4年</dd>
</dl>
<!-- ********* End ********* -->
</body>
</html>
第2关：二维码名片页面的样式设计
任务描述
本关任务：对二维码名片界面进行样式设计。
相关知识
为了完成本关任务，你需要掌握：1.盒模型样式设置，2.文本外观样式设置，3.背景图的样式设置，4.复合选择器的运用。
编程任务及效果
对右侧编辑器中的Begin - End区域的文字内容补充样式规则，以实现下面的页面效果。
二维码效果图
具体要求
1.使用群组选择器，对、
-
、
、
-
标签中的内容进行样式设置。将外边距和内边距值设置为0，并将边框线宽设置为0
2.对-
标签进行样式设置：
-
标签进行样式设置：
（1）内容区宽度设置为170px，高度设置为26px
(2)文本行高设置为26px,文本颜色设置为#999
(3)左内边距设置为5px
5.对类名为poo1的元素进行样式设置。
（1）使文本字体粗细设置为bold
（2）使文字大小设置为16px
3.对类名为poo2的元素进行样式设置。使文字大小设置为12px
（1）内容区宽度设置为170px，高度设置为270px
(2)内边距设置为10px,外边距设置为10px
(3)边框线宽设置为10px，线样式设置为单实线，边框线颜色设置为#f1e9e9
3.对 标签进行样式设置：
（1）内容区宽度设置为170px，高度设置为162px
(2)背景图设置不平铺，背景图的水平定位值设置为-17px,垂直方向定位值设置为center
(3)底部外边距设置为5px
4.对 -
标签进行样式设置：
测试说明
补充代码后，请点击测评，平台会对你编写的样式代码进行测试，如果正确则完成闯关任务。
特别说明：考虑输入方便和检测程序设置的需要，样式属性的取值不加引号
越努力越幸运，祝你成功！
代码示例
<!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;
border:10px solid #f1e9e9;
padding:10px;
margin:10px;
}
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>
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
