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>

2. 实现显示第一章和第二章

    <div>
        <ul>
            <li>
                JavaScript
                <ol>
                    <li>
                        第一章
                    </li>
                    <li>
                        第二章
                    </li>
                </ol>
            </li>
        </ul>
        <ul>
            <li>
                Java
                <ol>
                    <li>
                        第一章
                    </li>
                    <li>
                        第二章
                    </li>
                </ol>
            </li>
        </ul>
    </div>

3. 实现显示第一章和第二章里面的内容

    <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>

总结

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