Web程序设计基础团购悬浮框页面制作

最新推荐文章于 2024-07-20 18:16:53 发布

hijazz93

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量397

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/2201_75437408/article/details/135304121

版权

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

<!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关：团购悬浮框页面的样式设计

<!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>