CSS列表[简述]

最新推荐文章于 2023-09-19 08:13:40 发布

不会写代码的菜

最新推荐文章于 2023-09-19 08:13:40 发布

阅读量337

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125363294

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

CSS列表

我们都知道,在HTML中有两种类型的列表:
- ul 无序列表:
  
  列表项的标记使用特殊图形.如小黑点,图片等
- ol 有序列表:

列表项的标记使用数字或字母等有序标记

我们使用CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

其常用列表设置方法如下:

代码示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li{
                color: #A52A2A;
                list-style-type: none;
                list-style-image: url(img/背景2.jpg);
                list-style-position: outside;
                
                /* list-style: none url(img/背景2.jpg) inside ;  简写 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>这是一个列</li>
            <li>这是一个列</li>
            <li>这是一个列</li>
        </ul>
    </body>
</html>

代码部分内容示例:

list-style-image : 将图象设置为列表项标志。
list-style-position : 设置列表中列表项标志的位置。
list-style-type : 设置列表项标志的类型。
- list-style-type: none; 设置为none即为去除原有图标
list-style: 简写属性

不会写代码的菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS列表[简述]

列表项的标记使用特殊图形.如小黑点,图片等列表项的标记使用数字或字母等有序标记其常用列表设置方法如下:代码示例如下: 代码部分内容示例: list-style-image : 将图象设置为列表项标志。list-style-position : 设置列表中列表项标志的位置。list-style-type : 设置列表项标志的类型。list-style-type: none; 设置为none即为去除原有图标list-style: 简写属性...
复制链接

扫一扫