CSS 列表样式

简单例子

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="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>&nbsp;&nbsp;<a href="#">厨具</a> </li>
    </ul>
</div>

</body>
</html>

css代码

.nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 30px;
    background: #ff5132;
}
/*list-style:
  none 去掉远点
  circle 空心圆
  decimal 数字*/
ul li{
    list-style: none;
    text-indent: 2em;
    background: brown;
}
ul{
    padding-inline-start: 0px;
}

效果

设置图片

参考资料网站https://www.runoob.com/css/css-background.html
找不到好的图片素材 就摸了。

posted @ 2021-05-06 10:35  一个经常掉线的人  阅读(76)  评论(0)    收藏  举报