家用电器分类 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>家用电器分类</title>
 6     <style>
 7         div{
 8             width: 300px;
 9         }
10         h2 {
11             font-size: 18px;
12             color: white;
13             font-weight: bold;
14             line-height: 35px;
15             background: linear-gradient(to bottom, #0467AC, #63A7D6, #B6DBF6);
16             text-indent: 1em;
17         }
18 
19         h3 {
20             font-weight: bold;
21             line-height: 30px;
22             background: linear-gradient(to bottom, #E4FFFA, #BDDFF7, #E4F1FA);
23             text-indent: 1.5em;
24         }
25 
26         li {
27             list-style: none;
28             text-indent: 0.8em;
29         }
30 
31         h3 a {
32             font-size: 14px;
33             color: #0565C6;
34             text-decoration: none;
35         }
36 
37         h3 a:hover {
38             color: #0565C6;
39             text-decoration: underline;
40         }
41 
42         a {
43             font-size: 16px;
44             line-height: 26px;
45             color: #666666;
46             text-decoration: none;
47         }
48 
49         a:hover {
50             color: #F60;
51             text-decoration: underline;
52         }
53     </style>
54 </head>
55 <body>
56 <div>
57     <h2>家用电器</h2>
58     <ul>
59         <li><h3><a href="#">大家电</a></h3></li>
60         <li>&nbsp;<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a></li>
61         <li><a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a></li>
62         <li><a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li>
63     </ul>
64     <ul>
65         <li><h3><a href="#">生活电器</a></h3></li>
66         <li>&nbsp;<a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a></li>
67         <li><a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#">电话机</a></li>
68     </ul>
69     <ul>
70         <li><h3><a href="#">厨房电器</a></h3></li>
71         <li>&nbsp;<a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a></li>
72         <li><a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a></li>
73     </ul>
74     <ul>
75         <li><h3><a href="#">五金家装</a></h3></li>
76         <li>&nbsp;<a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a></li>
77         <li><a href="#">仪器仪表</a> <a href="#">浴霸/排气</a> <a href="#">灯具</a></li>
78     </ul>
79 </div>
80 </body>
81 </html>

 

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