HTML中列表的实现

2016-12-08  本文已影响0人  TW冯雯

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

列表.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
上一篇 下一篇

猜你喜欢

热点阅读