CSS|列表样式

最新推荐文章于 2024-04-29 18:25:35 发布

Alan_Lowe

最新推荐文章于 2024-04-29 18:25:35 发布

阅读量403

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq_45985728/article/details/119253046

版权

css html5 列表

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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>&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></li>
        <li><a href="#">零食</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

在这里插入图片描述

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>&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></li>
        <li><a href="#">零食</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

在这里插入图片描述

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

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>&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></li>
        <li><a href="#">零食</a>&nbsp;&nbsp;<a href="#">保健品</a></li>
    </ul>
</div>

</body>
</html>

在这里插入图片描述

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

Alan_Lowe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|列表样式

CSS|列表样式我们可以看一下淘宝的左侧有一个导航框，如果我们要做一个这样的导航框，应该怎么样去操作呢？1.div我们看到图中的块是只占了网页的左侧一小部分，可以使用div来设置它占用的宽度#nav{ width: 200px; background-color: #b5dcff;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
复制链接

扫一扫