CSS列表样式属性

最新推荐文章于 2024-06-24 06:37:00 发布

杨旭华　

最新推荐文章于 2024-06-24 06:37:00 发布

阅读量837

点赞数

本文链接：https://blog.csdn.net/Yxh666/article/details/102809075

版权

列表样式属性

这里的列表指的是：无序列表和有序列表
因为在整个网页布局中无序列表是使用的最多的。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式属性</title>
    <style type="text/css">
        /*用后代元素选择器*/
        .box ul{
            list-style-type: none;  /*去除列表前面的项目符号*/
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>请列出中国的四大名著</h2>
        <ul>
            <li>水浒传</li>
            <li>西游记</li>
            <li>三国演义</li>
            <li>红楼梦</li>
        </ul>
    </div>
</body>
</html>

代码显示的效果是这样的，是没有实心圆的
在这里插入图片描述

在这里插入图片描述

上图选中的地方是可以修改的有（disc、square、circle）这些效果可以自己尝试修改一下看看，这里就不在一一展示了

        .box ul li{
            border: 1px solid #f00;    /*给文字加边框*/
            height: 35px;   /*要将文本在一个盒子里面垂直方向居中对齐，要将高度与行高设置为一样*/
            line-height: 35px;    /*边框高度*/
            list-style-position: inside;   /* 设置项目符号所在位置（框内还是框外，outside框外、inside框内）*/

在这里插入图片描述

list-style-image：将列表前面的项目符号设置为一张图片它的值是：url（图片的地址）

注意： url（）是固定写法

        .box ul li{
            border: 1px solid #f00;     /*给文字加边框和颜色*/
            height: 35px;   /*要将文本在一个盒子里面垂直方向居中对齐，要将高度与行高设置为一样*/
            line-height: 35px;      /*去除列表前面的项目符号 */
            list-style-type: none;
            list-style-image: url(图片地址，可以为相对路径也可以是绝对路径);         
                /* 将列表前面的符号换成一张图片 */
            list-style: none url(图片地址);
        }

在这里插入图片描述

以上是我随便找了一张图插入进去的效果，可以随便插入，但最好是小一点，太大的话会超过我们之前设置的框的大小

list-style: 这个属性是一个简写属性它集成了上面三个属性的功能，可以同时设置上面的三个属性。每一个属性之前使用空格分隔！他的属性值个数可以有很多个，位置也不定

        .box ul li{
            border: 1px solid #f00;     /*给文字加边框和颜色*/
            height: 35px;   /*要将文本在一个盒子里面垂直方向居中对齐，要将高度与行高设置为一样*/
            list-style: none url(图片的地址);
        }

在这里插入图片描述
图中指出的部分是必须要有空格分隔的
效果同上

好了，今天的列表式属性就到这里，请大家多多练习，多多记忆。

杨旭华　

关注

0
点赞
踩
0

收藏

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

列表样式属性这里的列表指的是：无序列表和有序列表因为在整个网页布局中无序列表是使用的最多的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表样式属性</title> <style type="t...
复制链接

扫一扫