美文网首页@web
HTML_实现一个简单列表

HTML_实现一个简单列表

作者: 07120665a058 | 来源:发表于2016-11-23 22:22 被阅读15次

    一、任务目标

    预期效果图

    二、任务分解

    • 首先是一个块,其中分为两部分(JavaScript 和 Java) 但是两个是一样的,所以只需实现一个
    • 块里面是一个无序列表(ul)里面包含两个有序列表(ol),每个里面在包含两个无序列表(ul

    三实现

    • 代码:
    <div>
        <ul>
        <li>JavaScript</li>
        <ol type="1">
            <li>第一章
                <ul type="square">
                    <li>const</li>
                    <li>let</li>
                </ul>
            </li>
            <li>第二章
                <ul>
                    <li>function</li>
                    <li>object</li>
                </ul>
            </li>
        </ol>
    
        <li>Java</li>
        <ol type="1">
            <li>第一章
                <ul type="square">
                    <li>class</li>
                    <li>package</li>
                </ul>
            </li>
            <li>第二章
                <ul>
                    <li>private</li>
                    <li>public</li>
                </ul>
            </li>
        </ol>
        </ul>
    </div>
    
    • 效果图:


      自己实现的效果图

    四、总结

    • 这次最大的收获就是本来看到题目觉得简单想立即动手写,但是还是想到了老师说的要写之前先想清楚,所有就让自己想清楚了整个过程,就很快写了出来,用时很短
    • 事先对这部分作了复习,注意点也都很清楚,算是一个demo预研,所以过程顺利
    • 要将学习方法落实到日常学习生活中

    相关文章

      网友评论

      本文标题:HTML_实现一个简单列表

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