其他分享
首页 > 其他分享> > CSS列表样式

CSS列表样式

作者:互联网

CSS列表样式

首先定义一个列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
</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>&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>
        <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>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">美妆</a>&nbsp;&nbsp;<a href="#">时装</a></li>

    </ul>
</div>

</body>
</html>

网页效果如下:

然后引入style.css:

style.css代码如下:

#nav{
    width: 500px;
    background: darkgray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}

ul{
    background: darkgray;
}

/*
  list-style
  none:去掉圆点
  text-indent:缩进
 */
ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

/* 鼠标放上去的颜色*/
a:hover{
    color: #ff6519;
    text-decoration:underline;
}

效果如下:

标签:style,indent,样式,text,none,列表,nbsp,font,CSS
来源: https://www.cnblogs.com/dawn006/p/15774656.html