整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了html 中文本格式及段落等標簽，今天說下列表，什么是列表？它就是一種數據排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：
無序列表在每行開始位置顯示一個符號，語法如下：
<html>
<body>
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>顯示效果：
無序列表的符號可以通過在ul 標簽上設置 type 屬性顯示不同的符號，比如：
1、disc —— 實心圓點 (默認類型)
2、circle —— 空心圓圈
3、square —— 實心方塊
實例代碼：
<html>
<body>
<h4>一個無序列表：</h4>
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>顯示效果：
有序列表使用數字或字母符號排列，表示文本按一定順序顯示，語法如下：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>效果如下：
同無序列表一樣，在ol上通過type 屬性設置使用那種符號表示順序，有以下幾種：
1、1，表示數字 1、2、3..... （默認數字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....
顯示效果如下：
html代碼：
<!DOCTYPE html>
<html>
<body>
數字
<ol type="1">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫字母
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫字母
<ol type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>有序列表還可以通過start 屬性設置起始數組，如下：
<ol start="3">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>顯示效果：
不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細地解釋文字，語法如下：
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
顯示效果：
第一行<dt>是要解釋的名詞，第二行標簽<dd>是解釋文本，會自動縮進。
以上三種列表是可以嵌套使用的，看如下示例：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果：
每嵌套一層，它的符號是不一樣的，你可以試試再嵌套一層看看效果。
當然，不同列表類型也可互相嵌套，根據顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ol>
<li>中國茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果如下：
列表是網頁制作中經常會使用的標簽，比如在制作網頁導航欄菜單時會經常用到ul列表，以后會講如何通過ul標簽制作一個下拉菜單，感謝您閱讀及關注，祝你學習愉快。
上篇：前端入門——html 文字格式、標題與段落
下篇：前端入門——html 超鏈接
得今天閑來無事，就寫了一個瀑布流下拉加載數據的效果。由于沒有數據就沒有用到ajax，用javascript的setTimeout()函數代替了一下。
代碼：
記：首先我們可以利用JavaScript腳本，調用對應列表的id來實現動態效果的展示，但是，如果遇到像淘寶一樣的網站，他的菜單比較多的情況的時候，我們通過動態綁定的方式就比較麻煩了。
所以，今天給大家介紹一個可以動態設置方式
在Html中建立對應的列表元素，如下
同時你要設置你的<li>標簽下的<di>標簽的display設置成none（就是把dl整個框架隱藏起來）
寫代碼之前，我們先來了解下實現原理
通過js獲取<li>標簽的一個集合
然后動態給每個<li>標簽添加一個index（下標)
再次循環便利數組，將每一個<di>標簽的css屬性置空（如果沒有用到css可以忽略）或者將原文的style標簽下的display再次重新設置成none
找到正在操作的<li>標簽節點，修改他的css屬性或者display屬性
下面我們來看看代碼的實現
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
