CSS学习10之列表

最新推荐文章于 2022-10-20 11:00:12 发布

小黑神zxs

最新推荐文章于 2022-10-20 11:00:12 发布

阅读量188

点赞数 1

分类专栏： CSS3详解文章标签： html css3 css列表前端 idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122913837

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

超链接伪类（我们常用的就这两个）：
hover 鼠标悬停
active 鼠标选择（按压）

简单应用

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            text-decoration: none;
            color: blue;
        }
        img{
            width: 180px;
            height: 200px;
        }
        /*超链接伪类
        hover  鼠标悬停
        active  鼠标选择（按压）*/
        a:hover{
            font-size: 40px;
            color: deeppink;
        }
        a:active{
            text-decoration: underline;
            color: yellow;
        }
        /*text-shadow : 颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: deeppink -3px 3px 1px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/三国演义.jpeg" alt="三国演义">
</a>
<p><a href="#">三国演义</a></p>
<p><a href="">作者：罗贯中</a></p>
价格：<d id="price">￥66</d>

</body>
</html>

样式css

#nav{
    width: 500px;
    background: gray;
}
.title{
    font: 30px bold 隶书;
    text-indent: 1em;
    line-height: 40px;
    background: red url("../images/d.png") no-repeat 450px 12px;
}
a{
    font: 20px bold;
    text-decoration: none;
    color: black;
}
a:hover{
    color: yellow;
}
ul{
    background: gray;
}

ul li{
    line-height: 50px;
    list-style: none;
    text-indent: 2em;
    background: gray url("../images/r.png") no-repeat 420px 16px;
}

效果

在这里插入图片描述

小结

列表格式默认是实心圆

none 去掉圆点
circle 空心圆
square 实心方块
decimal 数字标记

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习10之列表

回顾超链接伪类（我们常用的就这两个）：hover 鼠标悬停active 鼠标选择（按压）简单应用代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接伪类</title> <style> a{ text-decoration: none;
复制链接

扫一扫