HTML基础之列表

首先我们来明确一下我们的任务,我们需要用HTML列表的知识做出一个如图1.1的列表。


1.1
这个列表我们分三个步骤完成。

一. 先创建出最外层的部分。

<ul>  
    <li>JavaScript</li>    
    <li>Java</li>
</ul>
//其中无序列表始于<ul>,列表项始于<li>,其中<ul>与<li>是不可分割的

运行出来的结果:


无序列表

二. 接着创建出有序列表的部分。

<ul>
    <li>JavaScript</li>
    <ol>//无序列表与有序列表是嵌套关系
        <li>第一章</li>
        <li>第二章</li>
    </ol>
    <li>Java</li>
    <ol>
        <li>第一章</li>
        <li>第二章</li>
    </ol>
</ul>
//有序列表始于<ol>,而只要是列表,列表项都始于<li>,<ol>与<li>也是不可分割的。

运行出来的结果是:

无序列表

三. 最后添加正方形的无序列表样式。

<ul class="square">
    <li>function</li>
    <li>object</li>
</ul>
//用法如之前的无序列表一样,而正方形的列表样式则使用class去定义。

运行出来的结果:

正方形无序列表

最后完善一下代码就可以得到我们的目标列表了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 分为三大列表:无序列表、有序列表、定义列表 基本结构:
    瑾兰阅读 667评论 0 0
  • JAVA 类的加载过程 Child c= new Child ();为例进行说明1).因为new用到了Child....
    Rtia阅读 770评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,420评论 25 708
  • 外层ScrollView,内嵌ListView,都是垂直方向。采用内部拦截法,实现ListView能滚动时则让Li...
    风风风筝阅读 3,603评论 2 17
  • 穷黑夜之万物兮 恨目光之短浅 承秋意之萧瑟兮 奈弱不抵风寒 悲少壮之无为兮 料意气不得志 闻佳人之颦蹙兮 怜旧日之...
    仅此丨而已丶阅读 217评论 2 2