列表样式（重要）

列表

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="1.css" type="text/css"/>
 7 </head>
 8 <body>
 9 <h2 class="title">全部商品分类</h2>
10 <ul>
11     <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
12     <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
13     <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
14     <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
15     <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
16     <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
17     <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
18     <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
19 </ul>
20 
21 </body>
22 </html>
列表样式
 1 .title{
 2     font-size: 18px;
 3     font-weight: bold;
 4     text-indent: 1em;
 5     line-height: 30px;
 6     background: red;
 7 
 8 }
 9 /*ul li
10     list-style
11     none 去掉圆点
12     circle 空心圆
13     decimal 有序数字
14     square
15 */
16 ul{
17     background: #3cbda6;
18 }
19 ul li{
20     height: 30px;
21     list-style: none;
22     text-indent: 1em;
23 
24 }
25 a{
26     text-decoration: none;
27     font-size: 14px;
28     color: black;
29 }
30 a:hover{
31     color: green;
32     text-decoration: underline;
33 }

 

posted @ 2022-03-28 11:39  doremi429  阅读(41)  评论(0)  编辑  收藏  举报