列表

列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表样式</title>
  <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="nav">
  <h2 class="title">全部商品分类</h2>
  <ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
    <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
  </ul>
</div>

</body>
</html>
#nav{
   width: 300px;
    background: darkgrey;
}
.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* 颜色，图片，图片位置，平铺方式*/
    background: lightpink url("../images/d.png") 270px 10px no-repeat;
}
/*ul li*/
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square 正方形
 */
/*ul{*/
/*    background: darkgray;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.png") ;
    background-repeat: no-repeat;
    background-position: 228px 2px;

}
a{
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

 

posted @ 2022-03-08 23:30  少时凌云志  阅读(8)  评论(0)    收藏  举报