彩妆热卖产品列表 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>彩妆热卖产品列表</title>
 6     <style>
 7         p, ul, li {
 8             margin:0;
 9             padding:0;
10         }
11         ul, li {
12             list-style-type:none;
13         }
14         body {
15             background-color:#eee7e1;
16             font-size:12px;
17         }
18         #beauty {
19             width:260px;
20             background-color:#FFF;
21         }
22         .title {
23             font-size:14px;
24             font-weight:bold;
25             color:#FFF;
26             background-color:#e9185a;
27             height:35px;
28             line-height:35px;
29             padding-left:10px;
30         }
31         #beauty li {
32             border-bottom:1px #a8a5a5 dashed;
33             padding:5px 2px;
34         }
35         #beauty a {
36             color:#666666;
37             text-decoration:none;
38         }
39         #beauty a:hover {
40             color:#e9185a;
41         }
42         #beauty a span {
43             color:#FFF;
44             font-weight:bold;
45             margin-right: 10px;
46             display: inline-block;
47             width: 20px;
48             height: 20px;
49             border-radius: 50%;
50             background: #373b3c;
51             line-height: 20px;
52             text-align: center;
53 
54         }
55         #beauty a:hover span {
56             background: #e9185a;
57         }
58         #beauty li div{
59             display: none;
60             text-align: center;
61         }
62         #beauty a:hover div{
63             display: block;
64         }
65     </style>
66 </head>
67 <body>
68 <div id="beauty">
69     <p class="title">大家都喜欢的彩妆</p>
70     <ul>
71         <li>
72             <a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
73             <div><img src="image/icon-1.jpg"/>
74                 <p>￥62.00 最近69122人购买</p>
75             </div></a>
76         </li>
77         <li>
78             <a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
79             <div><img src="image/icon-2.jpg"/>
80                 <p>￥89.00 最近13610人购买</p>
81             </div></a>
82         </li>
83         <li>
84             <a href="#"><span>3</span>菲奥娜水漾CC霜40g
85             <div><img src="image/icon-3.jpg"/>
86                 <p>￥59.90 最近13403人购买</p>
87             </div></a>
88         </li>
89         <li>
90             <a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
91             <div><img src="image/icon-4.jpg"/>
92                 <p>￥169.00 最近16757人购买</p>
93             </div></a>
94         </li>
95     </ul>
96 </div>
97 </body>
98 </html>

 

posted @ 2021-01-20 09:22  残冰辉  阅读(772)  评论(0)    收藏  举报