HTML⽹页设计基础——电商团购悬浮框案例：
图⽚资源：
参考代码：
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>⽆标题⽂档</title>
6</head>
7 <style>
8  *{
9  margin: 0;
10  padding: 0;
11  }
12  ul{
13  margin: 50px auto;
14  padding-top:5px;
15  color: white;
16  width: 180px;
17  height: 255px;
18  list-style:none;
19  border:5px solid #613e72;
20  }
21  li{
22  padding-left: 35px;
23  line-height: 36px;
24  margin-left: 10px;
25  background:#613e72 url("../../素材/icon.png") no-repeat 5px center;
26  width: 125px;
27  height: 36px;
28  margin-top:5px;
29  }
30  .one{
31  color:#613e72;
32  background:url("../../素材/clock.png") no-repeat left center;
33  font-size: 15px;
34  margin-bottom: 5px;
35  }
36  .two{
37  background:url("../../素材/back.png") no-repeat left center;
38  color:#613e72;
39  margin-top: 5px;
40  }
41 </style>
42
43<body>
网页设计html代码大全美食
44 <ul>
45 <li class="one">7⽉30⽇0:00开团</li>
46 <li>新品团</li>
47 <li>尝鲜团</li>
48 <li>秒杀团</li>
49 <li>清仓团</li>
50 <li class="two">返回顶部</li>
51 </ul>
52</body>
53</html>