版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
I
表
■
?無杼擊列表
——序列表
—有序列表
?列表的酸步
2012-8-28SchoolSoochowUniversity2
無杼擊列表
?無標志列表
-指所要排列的內容前后并無一定次序，在使
用時并不需要進行特別的組織，而且列表前
面不需要特定的標志符號，如數字等.
?創建無標志列表的方法
-＜br＞標記
-＜dl＞...v/dl＞標記和vdt＞或者vdd＞標記的組
合
2012-8-28SchoolofAppliedTechnologySoochowUniversity
另杼擊列表
利用vbr>標記創建無標志列表
<html>
<head>
<body>
vhl>流行快訊v/hl><!-創建標題樣式->
<fontsize=4color="#000080”>
劉德華武漢演唱會取消vbr>
超女冠軍昨晚決出vbr>
</font>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity
二
I
vbr＞創建無標志列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity5
利用v(H＞…v/dl＞和vdt＞標記創建無標記列表
<html>
<body>
vh2>流行快訊v/h2><!-創建標題樣式->
<dl><fontsize=3color=u#000080,,>
vdt>劉德華武漢演唱會取消
vdt>超女冠軍昨晚決出
</font>
</dl>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity6
Vdl＞…v/dl＞和Vdt＞組合效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity7
利用＜dl＞...v/dl＞和vdd＞標記創建無標記列表
<html>
<body>
vh3>流行快訊v/h3><!-創建標題樣式->
<dl><fontsize=2color=66#000080,,>
vdd>劉德華武漢演唱會取消
vdd>超女冠軍昨晚決出
</font>
</dl>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity8
二
I
..
1：vdl＞…v/dl＞和vdd＞組合效果
21?
2012-8-28SchoolofAppliedTechnologySoochowUniversity9
石杼會列表Ji吉
?vbr＞標記，不會產生縮進
?＜dl＞...v/dl＞和vdt＞組合,不會產生縮進
?vdl＞…v/dl＞和vdd＞組合，會產生帶縮進
的列表
2012-8-28SchoolofAppliedTechnologySoochowUniversity10
有杼擊列忐
?無序列表
-指列表前面有圓圈等類似的標志，但這些列
表之間并沒有什么順序，只是為了使得每個
條目更加醒目。
?有序列表
-指列表前面存在數字或者英文字母等有順序
的標志，表示這些列表之間存在一定的前后
順序。這樣不但使得列表更加醒目，而且表
明了列表之間的順序關系。
2012-8-28SchoolofAppliedTechnologySoochowUniversity11
..........麥左.烈盛.............
,創建考限
-<ul>.......v/ul>和vli>組合。
-格式：
?<ul>
-<li>第一個列表
-<li>第二個列表
?</ul>
-注意：Qi>是單標記，即一個一個表項的開始,就是
前一個表項的結束.
2012-8-28SchoolofAppliedTechnologySoochowUniversity12
<
.
一
二.......為感理奏.........
三?羌屋加裝那總
二-列表項目作為一個整體，與上下段文本間各
二有一行空白;表項向右縮進并左對齊,每行前
二面有項目符號。每個表項左端的項目符號
二可為disc（實心圓點）、circle（空心圓
二點）、square（方塊），也可為圖像。
二
-例如
一<ultype="disc”>
二
二<ultype=^graphl.giP>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity13
」
無序列表應用示例
<html>
vhead>vtitle>無序列表v/title>v/head>
<body>
<palign=left><fontcolor=bluesize=4>
vb>流行快訊v/b>v/funt>v/p>
<ul>
<litype="circle"/U德華武漢演唱會取消
<litype="square”>超女冠軍昨晚決出
<litype="disc”>劉翔昨晚再獲冠軍
</ul>
</body>
SchoolofAppliedTechnologySoochowUniversity
無序列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity15
無序列表強音事項
?用Vlll＞和4i＞兩個標簽可以設計出想到整
齊的文本段。
,不推薦使用vul＞和vli＞來開發網頁。
?一般推薦使用段落vp＞或分區顯示vdiv＞
顯示標記來格式化文本。
2012-8-28SchoolofAppliedTechnologySoochowUniversity16
二
I
I:單列表
w:1受前裹...................................
□：單列表是比較常用的無序列表，它往往用
■：于列出幾個相關網頁的索引，以便通過超鏈接
來很快選取感興趣的內容。
工?格式為：
二.<menu>
q：<ih〉選單列表的標題
二：Qi〉第一個列表項
二〈廿〉第二個列表項
.?</menu>
,2012-8-28SchoolofAppliedTechnologySoochowUniversity17
二
I
單列表應用示例
?<html>
?<headxtitle>單歹U表應用示例</titleX/head>
?<body>
.<menu>
?<lhXfontsize=4>網頁設計過程
?</fontX/ln>
:<Li>打開編輯軟代
:<li>輸入HTML語言
?<li>保存文件
?<li>用瀏覽器瀏覽
.</menu>
:</body>
?</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity18
1:有序列表
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
,：?創建有序列表
4?-通過帶序號的列表可以更清楚地表達信息的順序。使用〈。1〉
二:標記可以建立有序列表，表項的標記為<li>
，??格式為：
2^9<oi>
J?<li〉第一個列表項
音,<li〉第二個列表項
一?</ol>
一：*在瀏覽器中顯示時，有序列表整個表項與上下段之間
??各有一行空白，列表項目向右縮進并左對齊，各表項
■?前帶序號。
H?
,2012-8-28SchoolofAppliedTechnologySoochowUniversity19
二
I
有序列表應用示例
<html>
<head><title>W序列表v/title>v/head>
<body>
<palign=left><fontcolor=bluesize=4>
vb>專業設置v/b>v/funt>v/p>
<ol>
vli>計算機應用
4i>計算機軟件
4i>計算機圖形學
</ol>
</body>
</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity20
有序列表應用示例效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity21
有序列表
改變有序列表中的序號種類
-利用<。1〉或Gi>中的type屬性可設定5種序號：數字、大小寫
英文字母、大小寫羅馬字母。默認序號為數字。
-在〈。1〉指定的符號樣式，影響其所有序列表。
-格式為：—TypeNumberingstyle
序號》
<oltype=1arabicnumbers1,2,3,
<litype=序號,aloweralpha與bja
—例如：AupperalphaAB,J.
ilowerromani,ii,iii,…
nnMn
<oltype=istart=4></ol>Iupperromaiti,n,m,
?type="i"：設定數目款式，其值有五
種，請參考右表，內定為type="l"。
?start="4?：設定開始數目，不論設定了哪一數目款式，其
值只能是等整數，內定為start=nlno
2012-8-28SchoolofAppliedTechnologySoochowUniversity22
列表的愛步
-列表嵌套把主頁分為多個層次，例如書的
目錄，給人以很強的層次感。
嵌套方式：-
-自身列表嵌套
-混合嵌套
2012-8-28SchoolofAppliedTechnologySoochowUniversity23
<
.
一e多列表就布（1）
二
三?嵌套無標志列表
二<html>
vheadxtitle>列表嵌套的應用</title></head>
二
<bodytext=navy>
二vh4>使用標記<dt>產生無標志列表嵌套v/h4>
<
二dl><!--最外層標記-->
vdt>在歌曲庫中增加周惠的《約定》——2004.4.21
二
vdt>新增林憶蓮的《至少還有你》----2000.4.21
二vdl>王菲金曲：<!-第二層標記->
<dt>《明月幾時有》
二
<dl><!-第三層標記->
:vdt>年度最佳歌曲
二
vdt>當月排行榜第一
二?
vdt>MTV制作最佳作品
二?
?</dl><!-第三層標記結束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity24
二一
I
&多列表愛布(1)
<dt>《棋子》
<dt>《天空》
<dt>《愛哭鬼》
v/dl><!”第—?層標記結束-->
vdt>動力火車火爆金曲一2000.4.25
v/dl><!—第一1層標記結束-1>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity25
二
I
43列表就布（1）歿果
文件《日編輯也）查看（y）收藏（獨工具（D幫助（a）
◎總會◎搜索山收藏夾金媒體J二_V3，@
地址9）區1Dg.HTML
-3-網頁-MP3-立即搜索-②攔翻▼|令工a▼3網站導航▼包j松注
使用標記<d?產生的標志列表嵌套
在歌曲庫中增加周惠的《約定》-----2004.4.21
新增林憶蓮的《至少還有你》——2000.4.21
王菲金曲：
《明月幾時有》
年度最佳歌曲
當月排行榜第一
MTV制作最佳作品
《棋子》
《天空》
《爰哭鬼》
動力火車火爆荃曲一2000.4.25
，由完畢自我的電腦
;拿開蛤|MlG3傘多,A本地磁盤?：）j?]Chap2-5Html語言…|②UltraEda>32.[D:\br....11苞3列表嵌套的應用-…!桌面》三《?區cJ暮黑國13:27
2012-8-28SchoolofAppliedTechnologySoochowUniversity26
<
.
一e多列表愛布（2）
二
三?嵌套有標志的無序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產生的標志列表嵌套v/h4>
二<ul>最外層標記
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<ul>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<ul><!-第三層標記->
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標記結束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity27
二一
I
&多列表愛布(2)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ul><!―.第—^層標記結束-->
vli>動力火車火爆金曲一2000425
v/ul><!--第一1層標記結束—>
</body>
</html>
?說明：
-有標志列表嵌套時，使用vul>、4i>組合標記會自動產生帶有
方框、圓圈等標志的列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity28
43列表成布(2)歿果
2012-8-28SchoolofAppliedTechnologySoochowUniversity29
<
.
一e多列表愛布（3）
二
三?嵌套有標志的有序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產生的標志列表嵌套v/h4>
二<ol><!--最外層標記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<oltype=i><!—第三層標記
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ol><!-第三層標記結束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity30
二一
I
&多列表愛布(3)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標記結束—>
vli>動力火車火爆金曲一2000425
v/ol><!--用一'層標記結束—>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity31
二
I
43列表就布（3）歿果
等有列表的冰套-MicrosoftInternetExplorer
文件（日編輯《0查看過）收藏（㈤工具（D和助比）
J畫H◎搜索」收藏夾W媒體3/，3?二］0口
地址（0>隹）Dg.HTML三］談轉到|鏈盤叫俺.
習阿頁-MP3立即搜索▼②攔截▼?工具.3巴站導航二J3）標注
使用標記<。1><li>產生的標志列表嵌套
1.在歌曲庫中增加周惠的《約定》----2004.4.21
新增林憶蓮的《至少還有你》——-2000.4.21
王菲金曲：
《明月幾時有》
i.年度最佳歌曲
ii.當月徘行榜第一
ii-MTV制作最佳作品
《快子》
《天空》
《爰哭鬼》
動力火車火爆金曲一2000.4.25
總完畢國我的電腦
3B開始|0日⑨發》?》本地磁盎9：）I篁］Chap2-5Html語百|②Ut"aEdit-32-R:\br…巷］有列表的嵌套-Mtcr...，桌面>>與弋。網運;二9G氧B313:56
2012-8-28SchoolofAppliedTechnologySoochowUniversity32
<
.
一泯合牽
二It
三?混合嵌套
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產生的標志列表嵌套v/h4>
二<ol><!--最外層標記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<ul><!-第三層標記->
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標記結束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity33
二一
I
泯合It牽
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標記結束—>
vli>動力火車火爆金曲一2000425
v/ol><!--用一'層標記結束—>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity34
二
I
閽合成步效果
的藉I-?-r
:拿開始IHe3
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 物聯網連接技術-洞察闡釋
- 個性化語音交互系統的開發-洞察闡釋
- 隨機方差模型-洞察闡釋
- 廣東亞視演藝職業學院《臨床醫學檢驗》2023-2024學年第二學期期末試卷
- 武漢交通職業學院《三筆字訓練一》2023-2024學年第二學期期末試卷
- 重慶工商大學《就業與創業指導》2023-2024學年第二學期期末試卷
- 撫順職業技術學院《室內陳設設計》2023-2024學年第二學期期末試卷
- 南京農業大學《影像診斷學見習》2023-2024學年第二學期期末試卷
- 變更調查實施方案
- 生態垂直農業-洞察及研究
- 油煙系統清洗施工方案
- 二次供水一體化智慧泵房
- 法定代表人和項目負責人質量安全責任制度(w)
- 第09講醛酮（教師版）-高二化學講義（人教2019選擇性必修3）
- 高血壓 糖尿病 健康宣教
- 食堂檢查燃氣安全培訓記錄
- 急診分診中的病情評估和分級
- TB10092-2017 鐵路橋涵混凝土結構設計規范
- 《腦室內出血》課件
- 長城招聘的心理測評答案
- 酒店保潔服務投標方案（完整技術標）
評論
0/150
提交評論