多语言展示
当前在线:1188今日阅读:176今日分享:34

HTML网页制作:[4]如何使用列表

在网页制作中,列表示必不可少的,且是一种非常有用的数据排列方式。这里,小编来教你如何在HTML中使用列表。常用的列表,无序列表,有序列表。
工具/原料
1

一台电脑

2

TXT文档或者DW等

一.无序列表的使用
1

无序列表的标记为:ul。所有的列表均在

之间。那么无序列表用来干什么呢?就是一堆有关系却没有先后顺序的数据排列在一起。比如吃的:花生、香蕉、西瓜等,都是能吃的,但没有先后顺序,就用无序列表来表示。

2

来吧,一起来看看代码。无标题文档

        
  • 香蕉
  •    
  • 花生
  •    
  • 西瓜
  •    
  • 黄瓜

3

打开刚写网页后,可以看到效果。每一行前,都有一个小圆圈表示。由此可见,他们是无序的。

4

不过无序列表前面的小圆圈是可以更改的,更改的方法就是:type参数。

    参数:1)disc:默认值,圆圈2)circle:空心的圆圈3)square:空心的正方形

5

举个例子:无标题文档

        
  • 香蕉
  •    
  • 花生
  •    
  • 西瓜
  •    
  • 黄瓜

6

入下图所示,前面的圆圈已经发生了变化

二.有序列表的使用
1

有序列表:

    .和无序列表一样的用法。有序列表是有先后顺序排列的,比如:1,2,3......或者a,b,c,d......

    2

    举个例子:无标题文档

          
    1. 第一排
    2.    
    3. 第二排
    4.    
    5. 第三排
    6.    
    7. 第四排

    3

    自然,有序列表前面的数字也是可以更改的,可以使数字、字母、罗马数字等。

      参数:1)1:代表数字1,2,32)a:代表小写字母a,b,c3)A:代表大写字母A,B,C4)i:消息罗马数字5)I:大写罗马数字

    4

    举个例子:无标题文档

          
    1. 第一排
    2.    
    3. 第二排
    4.    
    5. 第三排
    6.    
    7. 第四排

    5

    效果图如下

    推荐信息