Educoder_Web_团购悬浮框页面制作

最新推荐文章于 2025-02-27 08:16:40 发布

心猿意马归

最新推荐文章于 2025-02-27 08:16:40 发布

阅读量406

点赞数

分类专栏： Educoder_Web 文章标签：前端 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_53270267/article/details/122269144

版权

Educoder_Web 专栏收录该内容

14 篇文章

订阅专栏

本文展示了如何设计一个电商团购悬浮框，包括HTML结构的创建和CSS样式的设定。第一部分创建了包含团购信息的无序列表，如开团时间及各类团购名称。第二部分通过CSS设置了悬浮框的整体样式，如宽度、高度、边框，以及各个列表项的背景图片、颜色和内边距等，实现了悬浮框的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一关团购悬浮框界面的结构设计

第二关团购悬浮框也免得样式设计

第一关团购悬浮框界面的结构设计

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

第二关团购悬浮框也免得样式设计

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