html的列表,有序列表、无序列表、嵌套列表、定义列表

1. 有序列表
ul: 标签用于定义无序列表。
li:标签用于定义列表中的项目。

    <ul>
        <li>
            刘在石
        </li>
        <li>
            宋智孝
        </li>
        <li>
            李光洙
        </li>
    </ul>

在这里插入图片描述
2.无序列表
ol:标签用于定义有序列表。
ol元素的三个属性:
1.reversed:规定列表顺序为降序。
2.start :规定有序列表的起始值。
3.type:规定在列表中使用的标记类型。常见类型:1、A、a、I、i

<ol type="A" reversed>
        <li>
            刘在石
        </li>
        <li>
            宋智孝
        </li>
        <li>
            李光洙
        </li>
    </ol>

在这里插入图片描述
3.嵌套列表
有序、无序可以互相嵌套

<ul>rm
        <li>成员
            <ol>
                <li>
                    7012
                </li>
                <li>
                    cuigu
                </li>
            </ol>
        </li>
        <li>
            <ul>
                <li>
                    9012
                </li>
                <li>
                    jiangjiang
                </li>
            </ul>

在这里插入图片描述
4.定义列表
dl: 标签定义了一个包含术语定义以及描述的列表。
dt:标签用于定义列表中的项目(即术语部分)。
dd: 标签用于定义列表中项目的描述部分

 <dl>
        <dt>
            刘在石
        </dt>
        <dd>
            国民MC
        </dd>
    </dl>

在这里插入图片描述
css的两个有关list的属性
1.list-style-type:可设置列表的样式:方的、圆的、无等等
css代码

<style>
    ul.a {
        list-style-type: square;
    }
    ul.b {
        list-style-type: circle;
    }
    ul.c {
        list-style-type: disc;
    }
    ul.d {
        list-style-type: none;
    }
</style>
 <ul class="a">
        <li>
            haha
        </li>
        <li>
            金钟国
        </li>
        <li>
            池石镇
        </li>
    </ul>
    <ul class="b">
        <li>
            haha
        </li>
        <li>
            金钟国
        </li>
        <li>
            池石镇
        </li>
    </ul>
    <ul class="c">
        <li>
            haha
        </li>
        <li>
            金钟国
        </li>
        <li>
            池石镇
        </li>
    </ul>
    <ul class="d">
        <li>
            haha
        </li>
        <li>
            金钟国
        </li>
        <li>
            池石镇
        </li>
    </ul>

效果
在这里插入图片描述
2.list-style-image:可设置列表前面的为图片
css代码

ul.img {
        list-style-image: url("list.jpg");
    }
  <ul class="img">
        <li>
            西瓜
        </li>
        <li>
            草莓
        </li>
        <li>
            龙眼
        </li>
    </ul>

效果
在这里插入图片描述
能看到前面都是自己添加的图片,可以按自己的喜好设置图片,以及图片大小

  • 5
    点赞
  • 14
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

7012~~~~~~~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值