对右侧编辑器中的Begin - End区域的文字内容补充样式规则,以实现下面的页面效果。
具体要求
1.使用群组选择器,对<body>
、<dl>
、<dt>
、<dd>
标签中的内容进行样式设置。将外边距和内边距值设置为0,并将边框线宽设置为0
2.对<dl>
标签进行样式设置: (1)内容区宽度设置为170px,高度设置为270px (2)内边距设置为10px,外边距设置为10px (3)边框线宽设置为10px,线样式设置为单实线,边框线颜色设置为#f1e9e9
3.对<dt>
标签进行样式设置: (1)内容区宽度设置为170px,高度设置为162px (2)背景图设置不平铺,背景图的水平定位值设置为-17px,垂直方向定位值设置为center (3)底部外边距设置为5px
4.对<dd>
标签进行样式设置: (1)内容区宽度设置为170px,高度设置为26px (2)文本行高设置为26px,文本颜色设置为#999 (3)左内边距设置为5px
5.对类名为poo1的元素进行样式设置。 (1)使文本字体粗细设置为bold (2)使文字大小设置为16px 3.对类名为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;
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>