html之有序列表（ol）、无序列表（ul）、自定义列表（dl）_网页制作有序列表代码

作者：小蓝xlanll | 2024-03-22 05:55:29

踩

网页制作有序列表代码

有序列表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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/285714

html之有序列表（ol）、无序列表（ul）、自定义列表（dl）_网页制作有序列表代码

有序列表ol

2、无序列表ul

自定义列表