CSS（7）列表样式

列表样式

html

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../列表样式/style.css">
 ​
 </head>
 <body>
 ​
 <div id="nav">
 ​
 <h2 class="h2">京东</h2>
 ​
 <ul>
   <li><a href="">家用电器</a></li>
   <li><a href="">手机</a> &nbsp&nbsp&nbsp <a href="">运营商</a> &nbsp&nbsp&nbsp <a href="">数码</a></li>
   <li><a href="">电脑</a> &nbsp&nbsp&nbsp <a href="">办公</a></li>
   <li><a href="">家居</a> &nbsp&nbsp&nbsp <a href="">家具</a> &nbsp&nbsp&nbsp <a href="">家装</a> &nbsp&nbsp&nbsp <a href="">厨具</a></li>
   <li><a href="">男装</a> &nbsp&nbsp&nbsp <a href="">女装</a> &nbsp&nbsp&nbsp <a href="">童装</a> &nbsp&nbsp&nbsp <a href="">内衣</a></li>
 </ul>
 ​
 </div>
 </body>
 </html>

css

list-style : none 去掉圆点 circle 空心圆 decimal 数字 square 正方形

 #nav{
   /*可以去网页元素里调*/
   width: 237px;
 }
 ​
 h2{
   color: #222222;
   background: #779dbd;
   text-indent: 2em;
 }
 ​
 /*
   list-style :
       none     去掉圆点
       circle   空心圆
       decimal  数字
       square   正方形
 */
 ul li{
   color: #222222;
   background: #2f70ff;
   list-style: none;
   font-size: 10px;
   font-weight: bold;
   text-indent: 2em;
   height: 20px;
 }
 ​
 a{
   text-decoration: none;
 }
 ​
 a:hover{
   color: darkorange;
 }

 

 posted on 2021-06-25 18:08  琪琪又炸毛了  阅读(140)  评论(0)    收藏  举报