EduCoder-Web程序设计基础-html5—团购悬浮框页面制作-(第1关：团购悬浮框页面的结构设计)(第2关：团购悬浮框页面的样式设计)

最新推荐文章于 2024-04-09 13:06:50 发布

weixin_51402180

最新推荐文章于 2024-04-09 13:06:50 发布

阅读量1.6k

点赞数

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/weixin_51402180/article/details/122079850

版权

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

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

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

编程任务及效果
对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性，具体要求是：
1.在…中使用一个无序列表标签（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.使用组合选择器对标签、

标签和
标签中的内容进行样式设置，使其外边距值设置为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>

weixin_51402180

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EduCoder-Web程序设计基础-html5—团购悬浮框页面制作-(第1关：团购悬浮框页面的结构设计)(第2关：团购悬浮框页面的样式设计)

目录第1关：团购悬浮框页面的结构设计代码示例第2关：团购悬浮框页面的样式设计代码示例第1关：团购悬浮框页面的结构设计任务描述本关任务：设置一个团购悬浮框页面的主体结构。相关知识为了完成本关任务，你需要掌握：无序列表的结构。编程任务及效果对右侧编辑器中的Begin - End区域的内容，补充标签和标签属性，具体要求是：1.在…中使用一个无序列表标签（ul）装填列表项目。2.六行文本分别对应六个列表项。3.为第2个列表项到第6个列表项标签li添加类名为item的属性。测试说明补充代码后
复制链接

扫一扫

EduCoder-Web程序设计基础-html5—团购悬浮框页面制作-(第1关：团购悬浮框页面的结构设计)(第2关：团购悬浮框页面的样式设计)

目录

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

代码示例

第2关：团购悬浮框页面的样式设计

代码示例

“相关推荐”对你有帮助么？