EduCoder

2023-09-18 23:05| 来源: 网络整理| 查看: 265

目录第1关：团购悬浮框页面的结构设计代码示例第2关：团购悬浮框页面的样式设计代码示例

第1关：团购悬浮框页面的结构设计

任务描述本关任务：设置一个团购悬浮框页面的主体结构。

相关知识为了完成本关任务，你需要掌握：无序列表的结构。

编程任务及效果对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性，具体要求是： 1.在…中使用一个无序列表标签（ul）装填列表项目。 2.六行文本分别对应六个列表项。 3.为第2个列表项到第6个列表项标签li添加类名为item的属性。

测试说明补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

越努力越幸运，祝你成功！

代码示例 doctype html> 电商团购悬浮框 7月30日0:00开团新品团尝鲜团秒杀团清仓团返回顶部第2关：团购悬浮框页面的样式设计

任务描述本关任务：对团购悬浮框页面进行样式设计。

相关知识为了完成本关任务，你需要掌握：1.列表样式设置，2.文本外观样式的设置，3.背景样式设置。

编程任务及效果对右侧编辑器中的Begin - End区域的文字内容补充样式规则，以实现下面的页面效果。团购悬浮框效果图

具体要求 1.使用组合选择器对标签、

标签和标签中的内容进行样式设置，使其外边距值设置为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> 电商团购悬浮框 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; } 7月30日0:00开团新品团尝鲜团秒杀团清仓团返回顶部

【本文地址】

EduCoder

EduCoder

今日新闻

推荐新闻