HTML列表制作讲解零基础自学网页制

有序列表经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易理解了。学习是构建知识体系的过程,没有形成体系的知识学习再多也是碎片,是很难形成技能或深刻理解的,因此,如果您是零基础的初学者,第一次看我的教程,如果时间允许的话,请务必从目录中找寻第一篇,循序渐进的学习。列表分为有序列表、无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。首先介绍有序列表要用ol/ol标签告诉浏览器这里是列表。然后在里面添加li/li标签,在这个标签中添加内容即可。示例代码如下p我喜欢的水果/polli葡萄/lili西瓜/lili苹果/lili桃子/li/ol大家可以把它放到一个新的html框架中看看效果。完整代码如下:!DOCTYPEHTMLhtmlheadtitle列表/title/headbodyh有序列表/hp我喜欢的水果/polli葡萄/lili西瓜/lili苹果/lili桃子/li/ol/body/html页面效果如下:通过修改ol标签中的type属性我们可以改变序号显示的样式,默认的是数字,大家看一下不同的type值的不同效果吧!示例代码如下:oltype=Ali葡萄/lili西瓜/lili苹果/lili桃子/li/ololtype=ali葡萄/lili西瓜/lili苹果/lili桃子/li、/ololtype=Ili葡萄/lili西瓜/lili苹果/lili桃子/li/ol页面效果如下:下面给大家介绍一下搜狗输入法中如何输入罗马数字。step1.点击输入方式step2.点击特殊符号后选择数字序号,找到罗马数字即可除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在ol标签中修改style属性可以直接调用这些css中的属性。写法是style=list-style-type:属性值;示例代码如下:(使用日语中的片假名表示序号)olstyle=list-style-type:hiragana;li葡萄/lili西瓜/lili苹果/lili桃子/li/ol页面效果如图所示:是不是很有趣,这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明,大家自己课下去尝试,这个列表中既有有序列表的值也有无序列表的值。如图:资料来自w3school无序列表无序列表与有序列表的区别在于最外层的标签,它的写法是这样的:ul/ul。有一个记忆的小技巧,有序的英文是order,故有序列表为orderlist(列表),缩写为ol。无序为unorder,无序列表为unorderlist,缩写为ul。无序列表ul标签的type属性用来控制列表前的标记显示演示。示例代码如下:h无序列表/hp我喜欢的水果/pulli葡萄/lili西瓜/lili苹果/lili桃子/li/ulultype=discli葡萄/lili西瓜/lili苹果/lili桃子/li/ulultype=circleli葡萄/lili西瓜/lili苹果/lili桃子/li/ulultype=squareli葡萄/lili西瓜/lili苹果/lili桃子/li/ul页面效果如下:通过图片我们可知,无序列表默认的列表标识就是type=disc。style属性的话大家自己试试吧,这里就不啰嗦了。定义列表这个列表比较特殊,也比较不常见,主要就是显示名词定义的。首先要写入dl/dl标签。这是告诉浏览器这里是个定义列表,和ol或ul一样。定义的英文是definition,定义列表就是definitionlist,缩写是dl。下面在dl/dl标签中间写入定义的名称dt/dt,即definitiontitle(标题)。与定义名称标签并列的是定义描述dd/dd,即definitiondescribe(描述)。示例代码如下:dldt计算机/dtdd用来计算的仪器....../dddt显示器/dtdd以视觉方式显示信息的装置....../dd/dl页面效果如下:今天的内容结束了!列表嵌套列表的测试大家自己试试吧,学到现在,相信你们都可以完成了!如果您喜欢我的教程请


转载请注明:http://www.aierlanlan.com/tzrz/5995.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了