网页制作经验分享网页列表设计代码

文章插图
有序列表
经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。
学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。
列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。
首先介绍有序列表
要用<ol></ol>标签告诉浏览器这里是列表。
然后在里面添加<li></li>标签，在这个标签中添加内容即可。
示例代码如下
我喜欢的水果<ol><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ol>大家可以把它放到一个新的html框架中看看效果。
完整代码如下：
<!DOCTYPE HTML><html><head><title>列表</title></head><body><h>有序列表</h>我喜欢的水果<ol><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ol></body></html>页面效果如下：
通过修改<ol>标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：
<ol type="A"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ol><ol type="a"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li>、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>苹果</li> <li>桃子</li></ol>页面效果如下：
下面给大家介绍一下搜狗输入法中如何输入罗马数字。
step1.点击”输入方式”
step2.点击”特殊符号”后选择数字序号，找到罗马数字即可
除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在<ol>标签中修改style属性可以直接调用这些css中的属性。写法是style=”list-style-type:属性值；”
示例代码如下：(使用日语中的片假名表示序号)
<ol style="list-style-type:hiragana;"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ol>页面效果如图所示：
是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。
如图：
资料来自w3school
无序列表
无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：<ul></ul> 。
有一个记忆的小技巧，有序的英文是order，故有序列表为order list（列表），缩写为ol 。
无序为unorder，无序列表为unorder list，缩写为ul 。
无序列表<ul>标签的type属性用来控制列表前的标记显示演示。
示例代码如下：
<h>无序列表</h>我喜欢的水果<ul><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ul><ul type="disc"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ul><ul type="circle"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ul><ul type="square"><li>葡萄</li><li>西瓜</li><li>苹果</li><li>桃子</li></ul>页面效果如下：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

网页制作经验分享 网页列表设计代码

网页制作经验分享网页列表设计代码