第1关:团购悬浮框页面的结构设计
相关知识
为了完成本关任务,你需要掌握:无序列表的结构。
编程任务及效果
对右侧编辑器中的Begin - End区域的内容,补充标签和标签属性, 具体要求是: 1.在<body>...</body>
中使用一个无序列表标签(ul)装填列表项目。 2.六行文本分别对应六个列表项。 3.为第2个列表项到第6个列表项标签li添加类名为item的属性。
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
</head>
<body>
<!-- ********* Begin ********* -->
<ul>
<li>7月30日0:00开团</li>
<li class="item">新品团</li>
<li class="item">尝鲜团</li>
<li class="item">秒杀团</li>
<li class="item">清仓团</li>
<li class="item">返回顶部</li>
</ul>
<!-- ********* End ********* -->
</body>
</html>
第2关:团购悬浮框页面的样式设计
相关知识
为了完成本关任务,你需要掌握:1.列表样式设置,2.文本外观样式的设置,3.背景样式设置。
编程任务及效果
对右侧编辑器中的Begin - End区域的文字内容补充样式规则,以实现下面的页面效果。
具体要求
1.使用组合选择器对<body>
标签、<ul>
标签和<li>
标签中的内容进行样式设置,使其外边距值设置为0、内边距值设置为0、列表项目符号样式设置为none。 2.对标签body进行样式设置。 (1)文本字号大小设置为18px。 (2)文本字体设置为微软雅黑。 3.对标签ul进行样式设置。 (1)使其内容区的宽度设置为200px、高度设置为270px,外边距设置为20ox,内边距设置为10px。 (2)使用border属性综合设置边框线,使其线宽为3px、单实线、颜色值为#613e72。 4.对标签li进行样式设置。 (1)使其内容区的宽度设置为142px、高度设置为40px。 (2)设置文本行高为40px。 (3)使用background属性综合设置背景图,平铺方式设置为不平铺,水平方向图像定位设置左对齐,垂直方向图像定位设置为居中。 (4)设置左内边距值为40px。 (5)使用三个参数综合设置外边距,使得上外边距为0,左右设置为auto,下外边距为5px。 (6)文本颜色值设为#613e72。 5.对类名为item的元素进行样式设置。 (1)使用background属性综合设置背景图,平铺方式设置为不平铺,水平方向图像定位设置5px,垂直方向图像定位设置为居中。 (2)设置文本颜色值为#fff。 6.对类名为back的元素进行样式设置背景图,平铺方式设置为不平铺,水平方向图像定位设置左对齐,垂直方向图像定位设置为居中。
测试说明
补充代码后,请点击测评,平台会对你编写的样式代码进行测试,如果正确则完成闯关任务。 特别说明:考虑输入方便和检测程序设置的需要,样式属性的取值不加引号
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
<!-- ********* Begin ********* -->
<style>
body,ul,li{
padding:0;
margin:0;
list-style:none;
}
body{
font-size: 18px;
font-family:微软雅黑;
}
ul{
width: 200px;
height:270px;
margin: 20px;
border: 3px solid #613e72;
padding:10px;
}
li{
width:142px;
height:40px;
line-height:40px;
background: url(https://www.educoder.net/api/attachments/2046898) no-repeat left center ;
padding-left:40px;
margin:0 auto 5px;
color:#613e72;
}
.item{
background:#613e72 url(https://www.educoder.net/api/attachments/2046946) no-repeat 5px center ;
color:#fff;
}
.back{background:url(https://www.educoder.net/api/attachments/2046953) no-repeat left center ;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<ul>
<li>7月30日0:00开团</li>
<li class="item">新品团</li>
<li class="item">尝鲜团</li>
<li class="item">秒杀团</li>
<li class="item">清仓团</li>
<li class="back">返回顶部</li>
</ul>
</body>
</html>