html之有序列表（ol）、无序列表（ul）、自定义列表（dl）

最新推荐文章于 2024-09-14 22:38:00 发布

性野喜悲

最新推荐文章于 2024-09-14 22:38:00 发布

阅读量1.7k

点赞数

分类专栏：经验分享 html+css 文章标签：前端 css html Powered by 金山文档

本文链接：https://blog.csdn.net/leng0920/article/details/129769272

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

有序列表ol

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div style="color:red">注意：<br/>
    1、ol里只能放li标签，li里可以放任意标签<br/>
    2、文字前的数字是自动生成的<br/>
    3、type:1,a，A，i，I（只能有这五个取值）<br/>
    4、start只能是数字（用于设置有序从第几个数字或字母开始排序）
    </div>
    <div>1、默认样式（type="1"），不写即是默认的【start="3"代表从3开始排序，如果不写start则默认从1开始排序】</div>
    <ol start="3">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <div>1、以小写字母排序（type="a"）</div>
    <ol type="a">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <div>1、默认样式（type="A"）</div>
    <ol type="A">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <div>1、默认样式（type="i"）</div>
    <ol type="i">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <div>1、默认样式（type="I"）</div>
    <ol type="I">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
</body>
</html>

2、无序列表ul

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div style="color:red">注意：<br/>
    1、ul里只能放li标签，li里可以放任意标签<br/>
    2、默认是实心圆<br/>
    3、type:disc（默认的实心圆，可不写）,circle（空心圆）,square（实心小方块）,none（没有样式）【只能有这四个取值】
    </div>
    <div>1、默认实心小圆点（type="disc"），不写即是默认的</div>
    <ul >
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <div>1、空心圆（type="circle"）</div>
    <ul type="circle">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <div>1、默认样式（type="square"）</div>
    <ul type="square">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <div>1、无任何样式（type="none"）</div>
    <ul type="none">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
</body>
</html>

自定义列表

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     1、src为图片路径
    <dl >
        <dt><img width="100" height="100" src="./img/1.png" alt=""></dt>
        <dd style="margin-left:0">描述文字描述<br/>文字啊</dd>
    </dl>
    <dl >
        <dt><img width="100" height="100" src="./img/2.png" alt=""></dt>
        <dd style="margin-left:0">描述文字描述<br/>文字啊</dd>
    </dl>    <dl >
        <dt><img width="100" height="100" src="./img/3.png" alt=""></dt>
        <dd style="margin-left:0">描述文字描述<br/>文字啊</dd>
    </dl>
</body>
</html>