温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML&CSS基础学习笔记14—有序列表及列表嵌套

发布时间:2020-07-08 19:22:37 来源:网络 阅读:383 作者:macoder 栏目:开发技术

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧。

有序列表

现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去。HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示。

它的代码模板是这样的:

<span ><ol>  
    <li></li>  
    <li></li>  
    ...  
</ol></span>

看看他的具体代码实现是怎样的吧:

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title>使用有序列表</title>  </head>  <body>  <h2>为有序列表添加列表项</h2>  <ol>  
    <li>开会</li>  
    <li>写报告</li>  
    <li>睡觉</li>     </ol>  </body>  </html>

浏览器结果是:

HTML&CSS基础学习笔记14—有序列表及列表嵌套 

列表嵌套

我们知道标签是可以嵌套的,所以列表也是可以嵌套的。当我们列表中的某些列表项是列表时,我们就可以用嵌套。

现在就通过一个例子来看看无序列表和有序列表是如何嵌套使用的吧:

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title>使用有序列表和无序列表</title>  </head>  <body>  <h2>省份城市</h2>  <ul>  
    <li>安徽省</li>  
    <li>北京市</li>  
    <li>重庆市</li>  
    <li>福建省</li>  
    <li>甘肃省  
        <ul>  
            <li>兰州市</li>  
            <li>嘉峪关市</li>  
            <li>金昌市</li>  
        </ul>  
    </li>  </ul>  </body>  </html>

结果是怎样的呢?不妨前去http://www.mayacoder.com/lesson/lesson?lesson_id=31&knowledge_id=4 体验看看吧。

结果如下:

HTML&CSS基础学习笔记14—有序列表及列表嵌套


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

li ul ol
AI