昨天写的那篇文章《我教女朋友学编程Html系列(6)—Html常用表单控件》，基本上有1000人左右看了，那边文章是我站在前人的肩膀上修改来的，添加了截图和说明，合并了例子，使之更容易被初学者接受。
今天我要讲html的有序列表和无序列表及常用例子，网上搜索了一番，没有发现太好的文章，决定自己动手，丰衣足食。
在我搜文章或知识点的时候，有一点启发，总是想先看效果图，看看效果是什么样子，然后在决定是否要继续看下去，就像去相亲，先看看双方是否对上眼了，先有外貌的吸引，才有继续交往下去的必要，当然，如果你遇到了一个女神，然后对她穷追猛打，只要方式得当，追到手的希望还是蛮大的。
大家的时间都是宝贵的，因此，我决定，先展示效果图，然后再讲知识点，有兴趣的看看，没兴趣的闪过。
本来，我以为无序列表用的最多，有序列表次之，自定义列表很少用。搜了几个网站发现，有序列表也很少用。先看截图吧。
无序列表用的最多，下图是淘宝导航栏的截图，用的就是无序列表，后面我会把这个当做例子讲解。
下图是自定义列表，也是淘宝的，不是我给淘宝做广告，而是淘宝太有名了，我拿来给大家研究一下。
吃水不忘挖井人，w3school.com.cn给我们初学者提供了太多的免费资料，在此，免费为她宣传一下，下面这个有序列表的截图正式从该网站例子中得来，本文章的例子也将采用该网站的例子。
一、下面开讲，从无序列表开始。
无序列表的英文全称叫unorder list，不能粗浅的理解为没有顺序的列表，它其实还是有顺序的，把哪个选项写在前面，它就会在前面显示。
这里的“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。
不过，大家一般也讨厌这些圆点，加上这些圆点会很丑，因此，大家会通过设置样式把它去掉。
下面先看一个简单的例子：
先看图
代码如下：
<html> <body> <h4>程序员喜欢的习惯：</h4> <ul > <li>讲代码</li> <li>写博客</li> <li>看女神</li> <li>嗑瓜子</li> </ul> </body> </html>
知识讲解：
1，
无序列表使用一对闭合的标签表示，<ul></ul>。内部的一项使用 <li>内容</li>来表示。
2，
可以看到各项之前加了一个圆点，可以通过ul标签的type属性来修改这个修饰符。
(1) <ul type="disc"> 显示为一个圆点，是默认值。
(2) <ul type="circle">显示为一个空心圆圈。如图：
(3) <ul type="square">显示为一个实体正方形。如图：
3，
最常见的就是使用样式直接把修饰符干掉。修改方式如下：
<ul style="list-style-type:none;" >
效果图如下：
上面的例子，把无序列表的基本知识点讲完了。下面看淘宝导航栏的例子。
效果图如下：
源代码如下：
<html> <head> <style type="text/css"> .nav{ height:34px; border-bottom:2px solid #f40; overflow:hidden; *zoom:1 } .nav li{ display:inline; float:left; font-weight:700 } .nav .nav-bd,.nav .nav-hd{ margin-top:4px; height:33px } .nav .nav-bd li,.nav .nav-hd li{ position:relative } .nav .nav-bd a,.nav .nav-hd a{ height:28px; line-height:28px; overflow:hidden; *zoom:1; display:inline; float:left } .nav .nav-bd a:hover,.nav .nav-hd a:hover{ background:#f4f4f4 } .nav .nav-bd .nav-ad,.nav .nav-hd .nav-ad{ position:absolute; top:0; left:0; padding:0; height:33px } .nav .nav-bd .nav-ad:hover,.nav .nav-hd .nav-ad:hover{ background:0 0 } .nav .nav-bd .nav-ad img,.nav .nav-hd .nav-ad img{ height:33px } .nav .nav-hd{ display:inline; float:left } .nav .nav-hd li{ margin:0 10px; text-align:center; font-size:16px } .nav .nav-hd li a{ padding:0 3px; width:52px; color:#f40 } </style> </head> <body> <div class="nav"> <ul class="nav-hd"> <li> <a href="http://www.tmall.com/?spm=1.7281509.a214dau.1">天猫</a> </li> <li> <a href="http://ju.taobao.com/?spm=1.7281509.a214dau.2">聚划算</a> </li> <li> <a href="http://chaoshi.tmall.com/?spm=1.7281509.a214dau.3">超市</a> </li> </ul> </div> </body> </html>