我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

来源：互联网发布：ubuntu更新软件源命令编辑：程序博客网时间：2024/05/02 17:14

无序列表用的最多，下图是淘宝导航栏的截图，用的就是无序列表，后面我会把这个当做例子讲解。

下图是自定义列表，也是淘宝的，不是我给淘宝做广告，而是淘宝太有名了，我拿来给大家研究一下。

吃水不忘挖井人，w3school.com.cn给我们初学者提供了太多的免费资料，在此，免费为她宣传一下，下面这个有序列表的截图正式从该网站例子中得来，本文章的例子也将采用该网站的例子。

一、下面开讲，从无序列表开始。

无序列表的英文全称叫unorder list，不能粗浅的理解为没有顺序的列表，它其实还是有顺序的，把哪个选项写在前面，它就会在前面显示。

这里的“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。

不过，大家一般也讨厌这些圆点，加上这些圆点会很丑，因此，大家会通过设置样式把它去掉。

下面先看一个简单的例子：

先看图

代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><html><body><h4>程序员喜欢的习惯：</h4><ul > <li>讲代码</li> <li>写博客</li> <li>看女神</li> <li>嗑瓜子</li></ul></body></html></span>

知识讲解：
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;" >

效果图如下：

上面的例子，把无序列表的基本知识点讲完了。下面看淘宝导航栏的例子。

效果图如下：

源代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><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></span>

说明：
1，
淘宝的导航栏是由多个无序列表ul组成，这里摘出来第一个无序列表来分析。
2，
在标签<style type="text/css"></style>内部的代码都是我从淘宝“偷”出来的样式源代码，这个等以后给你讲css的时候再说，不用看这部分代码，它的作用就是给无序列表整整容。
3，
可以看到标签<div class="nav">，div标签通常用来布局，增加一个class(类名称)也是方便使用样式来修饰。
4，
无序列表<ul class="nav-hd">，同样增加了class，就是方便使用样式，不用管，等讲样式的时候在说。
5，
这个无序列表<li>内部是超链接标签a，实际上，很多菜单栏都是通过这种方式来做的，二级菜单还会嵌套一个ul无序标签，li的内部放一个a标签，当用户单击某个选项，就可以进入href指定的网页，这就实现了菜单的功能。

二、自定义列表

先看例子效果图：

源代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><html><body><h2>一个定义列表：</h2><dl>   <dt>计算机</dt>              <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>              <dd>以视觉方式显示信息的装置 ... ...</dd></dl></body></html> </span>

知识讲解：
1，
<dl> 标签全称是definition list，代表“自定义列表”。
2，
<dt> 标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。
3，
<dd> 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。
4，
自定义列表，只需要记住3个标签就Ok了，都是d开头，definition就是自定义的意思。

<dl>后面的l代表list，列表的意思。

<dt>后面的t代表term，“项目”的意思。

<dd>后面的d代表description，“描述”的意思。

下面来看淘宝自定义列表的例子。

效果图如下：

源代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><html><head><style type="text/css">  .side .discover{       padding:20px 14px;             border:1px solid #e8e8e8} .side .discover dt{       margin-bottom:10px} .side .discover dt s{       text-indent:-3000px;       width:120px;       height:18px;       *display:block} .side .content-wrapper{       height:1068px;       background-color:#fff} .side .change-wrapper{       padding:8px 0;       background-color:#fff;       cursor:pointer;       color:#737373;       border:1px solid #e8e8e8;       border-top:0} .side .change-wrapper:hover{       color:#f40} .side .change-wrapper .s-change-gray{       margin-left:86px;       width:15px;       height:17px;       margin-right:7px}   .service-side{       width:190px} .tb-service{       width:190px;       box-shadow:2px 2px 0 #eeeef0;       background-color:#fff;       position:relative} .tb-service h2{       background:#f40;       height:35px} .tb-service h2 s{       margin:10px 14px;       height:16px;       width:100px;       text-indent:-2000px;       *display:block;       *overflow:hidden} .tb-service .service-bd{       height:454px;       overflow-y:hidden;       border:1px solid #ff4401;       border-top:0;       padding:0 9px} .tb-service .service-bd dt{       padding-top:10px;       font-size:14px;       font-weight:700;       line-height:19px;       padding-bottom:1px} .tb-service .service-bd dt s{       width:25px;       height:21px;       margin-right:7px;       margin-top:-3px;       *text-indent:0} .tb-service .service-bd dd{       border-bottom:1px solid #e6e7eb;       padding-bottom:10px;       padding-left:5px;       line-height:22px;       *padding-top:8px} .tb-service .service-bd dd a{       width:64px;       display:-moz-inline-stack;       display:inline-block;       vertical-align:middle;       *vertical-align:auto;       zoom:1;       *display:inline;       position:relative} .tb-service .service-bd dd .c-2{       width:54px} .tb-service .service-bd dd .c-3{       width:38px} .tb-service .service-bd dd .c-4{       width:29px} .tb-service .service-bd .last-dd{       border:0;       margin-top:10px \9} .tb-service .more{       position:relative;       position:absolute;       top:45px;       right:9px;       margin-right:0;       padding:0 10px 0 5px;       border:1px solid #e8e8e8;       background:#fff;       margin-top:-3px \9;       padding-top:3px \9} .tb-service .more em,.tb-service .more span{       position:absolute;       top:0;       left:0;       width:0;       height:0;       border-color:rgba(255,255,255,0);       border-color:transparent\0;       *border-color:transparent;       _border-color:tomato;       _filter:chroma(color=tomato);       border-style:solid;       overflow:hidden;       *zoom:1;       border-width:3px 0 3px 3px} .tb-service .more em{       left:2px;       border-left-color:#dadada} .tb-service .more span{       border-left-color:#fff} .tb-service .more i{       position:absolute;       top:6px;       left:30px} .tb-service .more i em,.tb-service .more i span{       overflow:visible} .tb-service .more:hover{       color:#fff;       border-color:#f40;       background:#f40} .tb-service .more:hover em{       border-left-color:#fff} .tb-service .more:hover span{       border-left-color:#f40}  </style> </head><body> <div class="side service-side"><div class="tb-service"> <dl class="service-bd"><dt>       <s class="fpicon s-service-theme"></s>主题市场</dt><dd data-spm="1997517385">       <a href="http://nvren.taobao.com/?spm=1.7275165.a214d7z.1" data-spm="d2" class="">淘宝女人   </a><a href="http://www.taobao.com/market/sport/citiao/yundongpai.php?spm=1.7275165.a214d7z.2" data-spm="d12" class=" c-2 ">运动派   </a>           <a href="http://qinglv.taobao.com/?spm=1.7275165.a214d7z.3" data-spm="d3" class=" c-3 ">情侣   </a>           <a href="http://nanren.taobao.com/?spm=1.7275165.a214d7z.4" data-spm="d1" class="">淘宝男人   </a>           <a href="http://www.taobao.com/market/baobao/2014/index.php?spm=1.7275165.a214d7z.5" data-spm="d5" class=" c-2 ">孕婴童   </a>           <a href="http://www.taobao.com/market/home/2014/index.php?spm=1.7275165.a214d7z.6" data-spm="d18" class=" c-3 ">家居   </a>           <a href="http://www.taobao.com/market/mei/index.php?spm=1.7275165.a214d7z.7" data-spm="d10" class="">美容护肤   </a>           <a href="http://zln.taobao.com/?spm=1.7275165.a214d7z.8" data-spm="d6" class=" c-2 ">中老年   </a>            <a href="http://www.taobao.com/market/foodindex.php?spm=1.7275165.a214d7z.9" data-spm="d14" class=" c-3 ">美食   </a>           <a href="http://jiehun.taobao.com/?spm=1.7275165.a214d7z.10" data-spm="d4" class="">美嫁新娘   </a>           <a href="http://www.taobao.com/market/car/index.php?spm=1.7275165.a214d7z.11" data-spm="d17" class=" c-2 ">有车族   </a>           <a href="http://www.taobao.com/market/jia/2014index.php?spm=1.7275165.a214d7z.12" data-spm="d19" class=" c-3 ">装修   </a>            <a href="http://www.taobao.com/market/3c/home.php?spm=1.7275165.a214d7z.13" data-spm="d8" class="">手机数码   </a>           <a href="http://shenghuo.taobao.com/?spm=1.7275165.a214d7z.14" data-spm="d20" class=" c-2 ">生活家   </a>           <a href="http://game.taobao.com/?spm=1.7275165.a214d7z.15" data-spm="d13" class=" c-3 ">游戏   </a>                             </dd>           </dl> </div></div></body></html> </span>

说明：
1，
样式没有“偷”完整，正常的应该是3个a标签为一行的。感兴趣的童鞋，可以自己偷偷看。
2，
这里的<dt>内部先是一个删除线标签<s>(就是在文字中间加一条线)，后面是文字“主题市场”。
3，
< dd>标签内部就是一些超链接标签a组成。

三、有序列表

例子效果图如下：

源代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html><html><body><ol>  <li>咖啡</li>  <li>牛奶</li>  <li>茶</li></ol> <ol start="50">  <li>咖啡</li>  <li>牛奶</li>  <li>茶</li></ol></body></html></span>

知识讲解：

1，
<ol>的英文为order list，意思是“有序列表”，默认在每项前面显示1,2,3…

<ol type="A">：在每项前面显示A，B，C…

<ol type="a">：在每项前面显示a，b，c…

<ol type="I">：在每项前面显示I，II，III…

不过这些都不多用。

2，
第二个有序列表ol增加了一个属性，<ol start="50">，这样就指定了起始值从50开始。

3，
每项使用<li></li>标签来表示。内部是显示内容。

0 0