团购悬浮框页面制作

是小鹿呀
392 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第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>
写在后边的话

不知道这个是不是最后一个Web练习题了，之后会出Web的实验报告博客，大家可以关注小鹿，下学期还会更新其他科目的Educoder题，也会有一些别的平台上的题目解析，谢谢大家的陪伴！

avatar
文章
阅读
粉丝