我教女友學編程html系列(7)—Html無序列表、自定義列表、有序列表及經常使用例子

時間 2019-11-12

原文原文鏈接

昨天寫的那篇文章《我教女友學編程Html系列(6)—Html經常使用表單控件》，基本上有1000人左右看了，那邊文章是我站在前人的肩膀上修改來的，添加了截圖和說明，合併了例子，使之更容易被初學者接受。php

今天我要講html的有序列表和無序列表及經常使用例子，網上搜索了一番，沒有發現太好的文章，決定本身動手，豐衣足食。css

在我搜文章或知識點的時候，有一點啓發，老是想先看效果圖，看看效果是什麼樣子，而後在決定是否要繼續看下去，就像去相親，先看看雙方是否對上眼了，先有外貌的吸引，纔有繼續交往下去的必要，固然，若是你遇到了一個女神，而後對她窮追猛打，只要方式得當，追到手的但願仍是蠻大的。html

你們的時間都是寶貴的，所以，我決定，先展現效果圖，而後再講知識點，有興趣的看看，沒興趣的閃過。程序員

原本，我覺得無序列表用的最多，有序列表次之，自定義列表不多用。搜了幾個網站發現，有序列表也不多用。先看截圖吧。編程

無序列表用的最多，下圖是淘寶導航欄的截圖，用的就是無序列表，後面我會把這個當作例子講解。app

下圖是自定義列表，也是淘寶的，不是我給淘寶作廣告，而是淘寶太有名了，我拿來給你們研究一下。ide

吃水不忘挖井人，w3school.com.cn給咱們初學者提供了太多的免費資料，在此，免費爲她宣傳一下，下面這個有序列表的截圖正式從該網站例子中得來，本文章的例子也將採用該網站的例子。佈局

1、下面開講，從無序列表開始。網站

無序列表的英文全稱叫unorder list，不能粗淺的理解爲沒有順序的列表，它其實仍是有順序的，把哪一個選項寫在前面，它就會在前面顯示。spa

這裏的「無序」指的是沒用數字或字母等來標記，不是像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，

最多見的就是使用樣式直接把修飾符幹掉。修改方式以下：

效果圖以下：

上面的例子，把無序列表的基本知識點講完了。下面看淘寶導航欄的例子。

效果圖以下：

源代碼以下：

<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>

View Code

說明：

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指定的網頁，這就實現了菜單的功能。

2、自定義列表

先看例子效果圖：

源代碼以下：

<html>

<body>

<h2>一個定義列表：</h2>

<dl>

   <dt>計算機</dt>

              <dd>用來計算的儀器 ... ...</dd>

   <dt>顯示器</dt>

              <dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

</body>

</html>

知識講解：

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，「描述」的意思。

下面來看淘寶自定義列表的例子。

效果圖以下：

源代碼以下：

<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>

View Code

說明：

1，

樣式沒有「偷」完整，正常的應該是3個a標籤爲一行的。感興趣的童鞋，能夠本身偷偷看。

2，

這裏的<dt>內部先是一個刪除線標籤<s>(就是在文字中間加一條線)，後面是文字「主題市場」。

3，

< dd>標籤內部就是一些超連接標籤a組成。

3、有序列表

例子效果圖以下：

源代碼以下：

<!DOCTYPE html>

<html>

<body>

<ol>

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

 

<ol start="50">

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

</body>

</html>

知識講解：

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>標籤來表示。內部是顯示內容。

寫到這裏，文章終於寫完了，總共用了4個多小時，如今是凌晨1點40。原本今天是很累的，由於昨晚一晚上沒怎麼睡着，不過這並不影響個人工做，上班的時間依舊精神抖擻，並且代碼質量也比往常高一些，主要就是心態變化了吧。