CSS学习笔记6：列表样式

最新推荐文章于 2024-05-03 15:15:35 发布

提辖鲁

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量143

点赞数

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

本文链接：https://blog.csdn.net/lj402159806/article/details/122481853

版权

Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

13 篇文章 0 订阅

订阅专栏

列表项符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表项符号</title>
    <style>
        /*ol列表的list-style-type属性*/
        /*decimal	阿拉伯数字：1、2、3…（默认值）*/
        /*lower-roman	小写罗马数字：i、ii、iii…*/
        /*upper-roman	大写罗马数字：I、II、III…*/
        /*lower-alpha	小写英文字母：a、b、c…*/
        /*upper-alpha	大写英文字母：A、B、C…*/
        ol {
            list-style-type: lower-roman;
        }

        /*ul列表的list-style-type属性*/
        /*disc	实心圆●（默认值）*/
        /*circle	空心圆○*/
        /*square	正方形■*/
        ul {
            list-style-type: circle;
        }

        /*使用none去除符号*/
        .no_style_list {
            list-style-type: none;
        }
    </style>
</head>
<body>
<h3>有序列表</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<h3>无序列表</h3>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<h3>无符号有序列表</h3>
<ol class="no_style_list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<h3>无符号无序列表</h3>
<ul class=no_style_list>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

在这里插入图片描述

列表项图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表项图片</title>
    <style>
        ul {
            list-style-image: url("img/list.png");
        }
    </style>
</head>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <style>
        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            color: hotpink;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="https://www.baidu.com" target="_blank">Top1: 百度</a></li>
    <li><a href="https://www.taobao.com" target="_blank">Top2: 淘宝</a></li>
    <li><a href="https://www.sina.com.cn" target="_blank">Top3: 新浪</a></li>
    <li><a href="https://www.163.com" target="_blank">Top4: 网易</a></li>
    <li><a href="https://www.sohu.com" target="_blank">Top5: 搜狐</a></li>
</ul>
</body>
</html>

在这里插入图片描述

提辖鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记6：列表样式

列表项符号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表项符号</title> <style> /*ol列表的list-style-type属性*/ /*decimal 阿拉伯数字：1、2、3…（默认值）*/ /*lower-roman 小写罗马数字：i、
复制链接

扫一扫