039.列表样式的练习（模仿京东商城列表） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-12-6</title>
        <link rel="stylesheet" type="text/css" href="../css/列表的样式.css"/>
    </head>
    <body>
     <div id="nav">
         <h2 class="title">全部商品分类</h2>
         <ul>
             <li>
                 <a href="#">图书</a>
                 <a href="#">音像</a>
                 <a href="#">数字商品</a>
             </li>
             <li>
                 <a href="#">家用电器</a>
                 <a href="#">手机</a>
                 <a href="#">数码</a>
             </li>
             <li>
                 <a href="#">电脑</a>
                 <a href="#">办公</a>
             </li>
             <li>
                 <a href="#">家居</a>
                 <a href="#">家装</a>
                 <a href="#">厨具</a>
             </li>
             <li>
                 <a href="#">服饰鞋帽</a>
                 <a href="#">个性化妆</a>
             </li>
             <li>
                 <a href="#">礼品箱包</a>
                 <a href="#">钟表</a>
                 <a href="#">珠宝</a>
             </li>
             <li>
                 <a href="#">食品饮料</a>
                 <a href="#">保健食品</a>
             </li>
             <li>
                 <a href="#">彩票</a>
                 <a href="#">旅行</a>
                 <a href="#">充值</a>
                 <a href="#">票务</a>
             </li>
         </ul>
     </div>
     </body>
</html>
#nav{
    width: 300px;
    background:  #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 60px;
    background: red;
}
/*
list-style:
 none;去掉圆点
 cricle 空心圆
 decimal 数字
 square 正方形

*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

 

posted @ 2021-12-07 00:12  李林林  阅读(41)  评论(0)    收藏  举报