HTML实现列表

任务列表
任务列表
初步认识

当看到这个题目的时候,首先去了解以及学习了列表标签,主要是ul和ol
http://www.jianshu.com/p/954205d70ffa

拆分任务
  • 实现显示JavaScript和Java
  • 实现显示第一章和第二章
  • 实现显示第一章和第二章里面的内容
任务实现

代码实现如下:

  1. 实现显示JavaScript和Java
    <div>
        <ul>
            <li>
                JavaScript
            </li>
        </ul>
        <ul>
            <li>
                Java
           </li>
        </ul>
    </div>
  1. 实现显示第一章和第二章
    <div>
        <ul>
            <li>
                JavaScript
                <ol>
                    <li>
                        第一章
                    </li>
                    <li>
                        第二章
                    </li>
                </ol>
            </li>
        </ul>
        <ul>
            <li>
                Java
                <ol>
                    <li>
                        第一章
                    </li>
                    <li>
                        第二章
                    </li>
                </ol>
            </li>
        </ul>
    </div>
  1. 实现显示第一章和第二章里面的内容
    <div>
        <ul>
            <li>
                JavaScript
                <ol>
                    <li>
                        第一章
                        <ul>
                            <li>
                                const
                            </li>
                            <li>
                                let
                            </li>
                        </ul>
                    </li>
                    <li>
                        第二章
                        <ul>
                            <li>
                                function
                            </li>
                            <li>
                                object
                            </li>
                        </ul>
                    </li>
                </ol>
            </li>
        </ul>
        <ul>
            <li>
                Java
                <ol>
                    <li>
                        第一章
                        <ul>
                            <li>
                                class
                            </li>
                            <li>
                                package
                            </li>
                        </ul>
                    </li>
                    <li>
                        第二章
                        <ul>
                            <li>
                                private
                            </li>
                            <li>
                                public
                            </li>
                        </ul>
                    </li>
                </ol>
            </li>
        </ul>
    </div>
总结

遇到任务时首先明确任务列表
进行概念学习
根据任务列表拆分任务
根据拆分的任务逐个去实现
记得写简书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容