美文网首页
HTML学习之列表

HTML学习之列表

作者: heheheyuanqing | 来源:发表于2017-05-13 19:23 被阅读13次

通过HTML实现如下列表

可见该列表为嵌套列表,最外一层为无序列表,第二层为有序列表,第三层为无序列表,并且无序列表样式也不同,分别为disc(实心圆)和square(方块),可以通过type设置样式

HTML编写方式

<ul type="dics">
    <li>javascript
        <ol>
            <li>第一章
                <ul type= "square">
                    <li>const</li>
                    <li>let</li>
                </ul>
            </li>
            <li>第二章
                <ul type= "square">
                    <li>function</li>
                    <li>object</li>
                </ul>
            </li>
        </ol>
    </li>

    <li>java
        <ol>
            <li>第一章
                <ul type= "square">
                    <li>class</li>
                    <li>package</li>
                </ul>
            </li>
            <li>第二章
                <ul type= "square">
                    <li>private</li>
                    <li>public</li>
                </ul>
            </li>
        </ol>
    </li>
</ul>

相关文章

  • 前端学习之HTML——列表

    列表 表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便...

  • html实现一个简单列表

    目标效果 知识点 html标签之 标签定义有序列表 实例: 显示效果: html标签之 标签定义无序列表 实例...

  • HTML学习之列表

    通过HTML实现如下列表 可见该列表为嵌套列表,最外一层为无序列表,第二层为有序列表,第三层为无序列表,并且无序列...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML学习笔记(二)

    HTML学习笔记(二) 使用列表 使用表格 使用表单 添加多媒体 使用列表 ...

  • HTML列表

    HTML支持有序、无序和定义列表无序列表: 有序列表: 嵌套列表: 自定义列表: HTML 列表标签 定义有序列表...

  • HTML学习之列表样式

    简单总结一下列表的样式:有序列表,无序列表,定义列表。 三种列表的显示效果:

  • HTML学习心得(二)

    HTML 表格 表格中常用标签、属性及意义 HTML 列表 HTML无序列表 Coffee Milk 调...

网友评论

      本文标题:HTML学习之列表

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