CSS（7）列表样式

时间：2021-06-25 22:16:57 阅读：20 评论：0 收藏：0 [点我收藏+]

列表样式

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;
 }

CSS（7）列表样式

原文：https://www.cnblogs.com/qqyzml/p/14932096.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)