美文网首页
HTML中列表的实现

HTML中列表的实现

作者: TW冯雯 | 来源:发表于2016-12-08 18:39 被阅读0次

要求:实现以下样式的列表

列表.png
分析:以上列表最外层是一个无序列表,中间层嵌套一个有序列表,最里层又嵌套了一个无序列表。有序列表和无序列表分别通过以下方式实现:
有序列表:<ol> </ol>
无序列表:<ul> </ul>

代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset="utf-8"/>
</head>
<body>
    <ul>
        <li>JavaScript</li>
            <ol>
                <li>第一章</li>
                <ul>
                     <li>const</li>
                     <li>let</li>
                </ul>
                <li>第二章</li>
                <ul>
                    <li>const</li>
                    <li>let</li>
                </ul>
             </ol>
        <li>Java</li>
            <ol>
                <li>第一章</li>
                <ul>
                    <li>class</li>
                    <li>package</li>
                </ul>
                <li>第二章</li>
                <ul>
                    <li>private</li>
                    <li>public</li>
                </ul>
              </ol>
       </ul>
</body>
</html>

结果:

列表实现.png

相关文章

  • HTML中列表的实现

    要求:实现以下样式的列表 代码: 结果:

  • HTML实现列表

    任务列表 初步认识 当看到这个题目的时候,首先去了解以及学习了列表标签,主要是ul和olhttp://www.ji...

  • HTML:列表实现

    作业内容 使用HTML实现如下列表 知识点 : HTML列表使用 无序列表 无序列表是一个项目的列表,此列项目使用...

  • HTML 列表实现

    今天来讲一讲怎样用 HTML 来实现下面的列表。 第一步 可以看到第一层 JavaScript 和 Java 两个...

  • html作业1.1

    如图为作业内容 下图为作业成果 实现方式: 利用html的无序列表实现,html源代码如下: 列表的标题利用段落来...

  • 这个列表是如何实现的?

    如何实现上面这个列表? 1.先实现最大的无序列表,代码如下: Title ...

  • 三、Vue模板渲染

    一、todolist列表 jQuery实现方式html js Vue实现方式html js 比起上面的jQuery...

  • 用HTML来写列表

    考虑用html如何实现以下列表: 要实现的是有序列表和无序列表以及嵌套列表的结合 有序列表: 定义和用法: ...

  • HTML基础二

    HTML列表: 在html中,列表共分为三种:有序列表,无序列表和自定义列表 有序列表:有序列表中的各个列表都是有...

  • Html中的列表

    Html中列表共有三种:有序列表、无序列表和自定义列表。下面分开解释下: 1.有序列表是一列使用数字进行标记的项目...

网友评论

      本文标题:HTML中列表的实现

      本文链接:https://www.haomeiwen.com/subject/ldvsmttx.html