HTML實現列表

任務列表
任務列表
初步認識

當看到這個題目的時候,首先去了解以及學習了列表標簽,主要是ul和ol
http://www.lxweimin.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>
總結

遇到任務時首先明確任務列表
進行概念學習
根據任務列表拆分任務
根據拆分的任務逐個去實現
記得寫簡書

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容