CSS|列表样式

CSS|列表样式_css

我们可以看一下淘宝的左侧有一个导航框，如果我们要做一个这样的导航框，应该怎么样去操作呢？

1.div

我们看到图中的块是只占了网页的左侧一小部分，可以使用div来设置它占用的宽度

#nav{
    width: 200px;
    background-color: #b5dcff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="Style-demo12.css">
</head>
<body>

<div id="nav">
    <h2 class="title">商品分类</h2>
    <ul>
        <li><a href="#">图书</a>  <a href="#">音像</a></li>
        <li><a href="#">家用电器</a>  <a href="#">手机</a></li>
        <li><a href="#">电脑</a>  <a href="#">家具</a></li>
        <li><a href="#">零食</a>  <a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

CSS|列表样式_html5_02

list-style

设置标题的背景颜色和li标签的一些属性，并且使用list-style属性设置为none，将全面的小原点去掉：

/*让这个div块的宽度为200px*/
#nav{
    width: 200px;
    background-color: #b5dcff;
}
/*
font-size 字体大小
font-weight 字体粗细
text-indent 首行缩进
line-height 行高
*/
.title{
    font-size: 25px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 40px;
    background-color: yellow;
}
ul{
    background-color: #b5dcff;
}
/*
list-style：
(none去掉列表圆，circle是空心圆，
decimal是有序列表,square是方块)
*/
ul>li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="Style-demo12.css">
</head>
<body>

<div id="nav">
    <h2 class="title">商品分类</h2>
    <ul>
        <li><a href="#">图书</a>  <a href="#">音像</a></li>
        <li><a href="#">家用电器</a>  <a href="#">手机</a></li>
        <li><a href="#">电脑</a>  <a href="#">家具</a></li>
        <li><a href="#">零食</a>  <a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

CSS|列表样式_html5_03

可以看到图中的小黑点已经消失了，还可以设置为其他的样式：

list-style：

  • none去掉列表圆
  • circle是空心圆
  • decimal是有序列表
  • square是方块

hover

使用a标签的hover还可以设置鼠标悬浮在a标签上时候的状态：

/*让这个div块的宽度为200px*/
#nav{
    width: 200px;
    background-color: #b5dcff;
}
/*
font-size 字体大小
font-weight 字体粗细
text-indent 首行缩进
line-height 行高
*/
.title{
    font-size: 25px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 40px;
    background-color: yellow;
}
ul{
    background-color: #b5dcff;
}
/*
list-style：
(none去掉列表圆，circle是空心圆，
decimal是有序列表,square是方块)
*/
ul>li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
}
/*text-decoration: none去掉下划线*/
a{
    text-decoration: none;
}
/*碰到a标签的时候变成黄色并且加上下划线*/
a:hover{
    color: yellow;
    text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="Style-demo12.css">
</head>
<body>

<div id="nav">
    <h2 class="title">商品分类</h2>
    <ul>
        <li><a href="#">图书</a>  <a href="#">音像</a></li>
        <li><a href="#">家用电器</a>  <a href="#">手机</a></li>
        <li><a href="#">电脑</a>  <a href="#">家具</a></li>
        <li><a href="#">零食</a>  <a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

CSS|列表样式_html5_04

人生没有白走的路，每一步都算数！