版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
I
表
■
?無杼擊列表
——序列表
—有序列表
?列表的酸步
2012-8-28SchoolSoochowUniversity2
無杼擊列表
?無標(biāo)志列表
-指所要排列的內(nèi)容前后并無一定次序，在使
用時(shí)并不需要進(jìn)行特別的組織，而且列表前
面不需要特定的標(biāo)志符號(hào)，如數(shù)字等.
?創(chuàng)建無標(biāo)志列表的方法
-＜br＞標(biāo)記
-＜dl＞...v/dl＞標(biāo)記和vdt＞或者vdd＞標(biāo)記的組
合
2012-8-28SchoolofAppliedTechnologySoochowUniversity
另杼擊列表
利用vbr>標(biāo)記創(chuàng)建無標(biāo)志列表
<html>
<head>
<body>
vhl>流行快訊v/hl><!-創(chuàng)建標(biāo)題樣式->
<fontsize=4color="#000080”>
劉德華武漢演唱會(huì)取消vbr>
超女冠軍昨晚決出vbr>
</font>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity
二
I
vbr＞創(chuàng)建無標(biāo)志列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity5
利用v(H＞…v/dl＞和vdt＞標(biāo)記創(chuàng)建無標(biāo)記列表
<html>
<body>
vh2>流行快訊v/h2><!-創(chuàng)建標(biāo)題樣式->
<dl><fontsize=3color=u#000080,,>
vdt>劉德華武漢演唱會(huì)取消
vdt>超女冠軍昨晚決出
</font>
</dl>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity6
Vdl＞…v/dl＞和Vdt＞組合效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity7
利用＜dl＞...v/dl＞和vdd＞標(biāo)記創(chuàng)建無標(biāo)記列表
<html>
<body>
vh3>流行快訊v/h3><!-創(chuàng)建標(biāo)題樣式->
<dl><fontsize=2color=66#000080,,>
vdd>劉德華武漢演唱會(huì)取消
vdd>超女冠軍昨晚決出
</font>
</dl>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity8
二
I
..
1：vdl＞…v/dl＞和vdd＞組合效果
21?
2012-8-28SchoolofAppliedTechnologySoochowUniversity9
石杼會(huì)列表Ji吉
?vbr＞標(biāo)記，不會(huì)產(chǎn)生縮進(jìn)
?＜dl＞...v/dl＞和vdt＞組合,不會(huì)產(chǎn)生縮進(jìn)
?vdl＞…v/dl＞和vdd＞組合，會(huì)產(chǎn)生帶縮進(jìn)
的列表
2012-8-28SchoolofAppliedTechnologySoochowUniversity10
有杼擊列忐
?無序列表
-指列表前面有圓圈等類似的標(biāo)志，但這些列
表之間并沒有什么順序，只是為了使得每個(gè)
條目更加醒目。
?有序列表
-指列表前面存在數(shù)字或者英文字母等有順序
的標(biāo)志，表示這些列表之間存在一定的前后
順序。這樣不但使得列表更加醒目，而且表
明了列表之間的順序關(guān)系。
2012-8-28SchoolofAppliedTechnologySoochowUniversity11
..........麥左.烈盛.............
,創(chuàng)建考限
-<ul>.......v/ul>和vli>組合。
-格式：
?<ul>
-<li>第一個(gè)列表
-<li>第二個(gè)列表
?</ul>
-注意：Qi>是單標(biāo)記，即一個(gè)一個(gè)表項(xiàng)的開始,就是
前一個(gè)表項(xiàng)的結(jié)束.
2012-8-28SchoolofAppliedTechnologySoochowUniversity12
<
.
一
二.......為感理奏.........
三?羌屋加裝那總
二-列表項(xiàng)目作為一個(gè)整體，與上下段文本間各
二有一行空白;表項(xiàng)向右縮進(jìn)并左對齊,每行前
二面有項(xiàng)目符號(hào)。每個(gè)表項(xiàng)左端的項(xiàng)目符號(hào)
二可為disc（實(shí)心圓點(diǎn)）、circle（空心圓
二點(diǎn)）、square（方塊），也可為圖像。
二
-例如
一<ultype="disc”>
二
二<ultype=^graphl.giP>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity13
」
無序列表應(yīng)用示例
<html>
vhead>vtitle>無序列表v/title>v/head>
<body>
<palign=left><fontcolor=bluesize=4>
vb>流行快訊v/b>v/funt>v/p>
<ul>
<litype="circle"/U德華武漢演唱會(huì)取消
<litype="square”>超女冠軍昨晚決出
<litype="disc”>劉翔昨晚再獲冠軍
</ul>
</body>
SchoolofAppliedTechnologySoochowUniversity
無序列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity15
無序列表強(qiáng)音事項(xiàng)
?用Vlll＞和4i＞兩個(gè)標(biāo)簽可以設(shè)計(jì)出想到整
齊的文本段。
,不推薦使用vul＞和vli＞來開發(fā)網(wǎng)頁。
?一般推薦使用段落vp＞或分區(qū)顯示vdiv＞
顯示標(biāo)記來格式化文本。
2012-8-28SchoolofAppliedTechnologySoochowUniversity16
二
I
I:單列表
w:1受前裹...................................
□：單列表是比較常用的無序列表，它往往用
■：于列出幾個(gè)相關(guān)網(wǎng)頁的索引，以便通過超鏈接
來很快選取感興趣的內(nèi)容。
工?格式為：
二.<menu>
q：<ih〉選單列表的標(biāo)題
二：Qi〉第一個(gè)列表項(xiàng)
二〈廿〉第二個(gè)列表項(xiàng)
.?</menu>
,2012-8-28SchoolofAppliedTechnologySoochowUniversity17
二
I
單列表應(yīng)用示例
?<html>
?<headxtitle>單歹U表應(yīng)用示例</titleX/head>
?<body>
.<menu>
?<lhXfontsize=4>網(wǎng)頁設(shè)計(jì)過程
?</fontX/ln>
:<Li>打開編輯軟代
:<li>輸入HTML語言
?<li>保存文件
?<li>用瀏覽器瀏覽
.</menu>
:</body>
?</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity18
1:有序列表
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
,：?創(chuàng)建有序列表
4?-通過帶序號(hào)的列表可以更清楚地表達(dá)信息的順序。使用〈。1〉
二:標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記為<li>
，??格式為：
2^9<oi>
J?<li〉第一個(gè)列表項(xiàng)
音,<li〉第二個(gè)列表項(xiàng)
一?</ol>
一：*在瀏覽器中顯示時(shí)，有序列表整個(gè)表項(xiàng)與上下段之間
??各有一行空白，列表項(xiàng)目向右縮進(jìn)并左對齊，各表項(xiàng)
■?前帶序號(hào)。
H?
,2012-8-28SchoolofAppliedTechnologySoochowUniversity19
二
I
有序列表應(yīng)用示例
<html>
<head><title>W序列表v/title>v/head>
<body>
<palign=left><fontcolor=bluesize=4>
vb>專業(yè)設(shè)置v/b>v/funt>v/p>
<ol>
vli>計(jì)算機(jī)應(yīng)用
4i>計(jì)算機(jī)軟件
4i>計(jì)算機(jī)圖形學(xué)
</ol>
</body>
</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity20
有序列表應(yīng)用示例效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity21
有序列表
改變有序列表中的序號(hào)種類
-利用<。1〉或Gi>中的type屬性可設(shè)定5種序號(hào)：數(shù)字、大小寫
英文字母、大小寫羅馬字母。默認(rèn)序號(hào)為數(shù)字。
-在〈。1〉指定的符號(hào)樣式，影響其所有序列表。
-格式為：—TypeNumberingstyle
序號(hào)》
<oltype=1arabicnumbers1,2,3,
<litype=序號(hào),aloweralpha與bja
—例如：AupperalphaAB,J.
ilowerromani,ii,iii,…
nnMn
<oltype=istart=4></ol>Iupperromaiti,n,m,
?type="i"：設(shè)定數(shù)目款式，其值有五
種，請參考右表，內(nèi)定為type="l"。
?start="4?：設(shè)定開始數(shù)目，不論設(shè)定了哪一數(shù)目款式，其
值只能是等整數(shù)，內(nèi)定為start=nlno
2012-8-28SchoolofAppliedTechnologySoochowUniversity22
列表的愛步
-列表嵌套把主頁分為多個(gè)層次，例如書的
目錄，給人以很強(qiáng)的層次感。
嵌套方式：-
-自身列表嵌套
-混合嵌套
2012-8-28SchoolofAppliedTechnologySoochowUniversity23
<
.
一e多列表就布（1）
二
三?嵌套無標(biāo)志列表
二<html>
vheadxtitle>列表嵌套的應(yīng)用</title></head>
二
<bodytext=navy>
二vh4>使用標(biāo)記<dt>產(chǎn)生無標(biāo)志列表嵌套v/h4>
<
二dl><!--最外層標(biāo)記-->
vdt>在歌曲庫中增加周惠的《約定》——2004.4.21
二
vdt>新增林憶蓮的《至少還有你》----2000.4.21
二vdl>王菲金曲：<!-第二層標(biāo)記->
<dt>《明月幾時(shí)有》
二
<dl><!-第三層標(biāo)記->
:vdt>年度最佳歌曲
二
vdt>當(dāng)月排行榜第一
二?
vdt>MTV制作最佳作品
二?
?</dl><!-第三層標(biāo)記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity24
二一
I
&多列表愛布(1)
<dt>《棋子》
<dt>《天空》
<dt>《愛哭鬼》
v/dl><!”第—?層標(biāo)記結(jié)束-->
vdt>動(dòng)力火車火爆金曲一2000.4.25
v/dl><!—第一1層標(biāo)記結(jié)束-1>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity25
二
I
43列表就布（1）歿果
文件《日編輯也）查看（y）收藏（獨(dú)工具（D幫助（a）
◎總會(huì)◎搜索山收藏夾金媒體J二_V3，@
地址9）區(qū)1Dg.HTML
-3-網(wǎng)頁-MP3-立即搜索-②攔翻▼|令工a▼3網(wǎng)站導(dǎo)航▼包j松注
使用標(biāo)記<d?產(chǎn)生的標(biāo)志列表嵌套
在歌曲庫中增加周惠的《約定》-----2004.4.21
新增林憶蓮的《至少還有你》——2000.4.21
王菲金曲：
《明月幾時(shí)有》
年度最佳歌曲
當(dāng)月排行榜第一
MTV制作最佳作品
《棋子》
《天空》
《爰哭鬼》
動(dòng)力火車火爆荃曲一2000.4.25
，由完畢自我的電腦
;拿開蛤|MlG3傘多,A本地磁盤?：）j?]Chap2-5Html語言…|②UltraEda>32.[D:\br....11苞3列表嵌套的應(yīng)用-…!桌面》三《?區(qū)cJ暮黑國13:27
2012-8-28SchoolofAppliedTechnologySoochowUniversity26
<
.
一e多列表愛布（2）
二
三?嵌套有標(biāo)志的無序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>
二<ul>最外層標(biāo)記
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<ul>王菲金曲：<!—第二層標(biāo)記—>
《明月幾時(shí)有》
二<li>
<ul><!-第三層標(biāo)記->
:vli>年度最佳歌曲
二
vli>當(dāng)月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標(biāo)記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity27
二一
I
&多列表愛布(2)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ul><!―.第—^層標(biāo)記結(jié)束-->
vli>動(dòng)力火車火爆金曲一2000425
v/ul><!--第一1層標(biāo)記結(jié)束—>
</body>
</html>
?說明：
-有標(biāo)志列表嵌套時(shí)，使用vul>、4i>組合標(biāo)記會(huì)自動(dòng)產(chǎn)生帶有
方框、圓圈等標(biāo)志的列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity28
43列表成布(2)歿果
2012-8-28SchoolofAppliedTechnologySoochowUniversity29
<
.
一e多列表愛布（3）
二
三?嵌套有標(biāo)志的有序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>
二<ol><!--最外層標(biāo)記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標(biāo)記—>
《明月幾時(shí)有》
二<li>
<oltype=i><!—第三層標(biāo)記
:vli>年度最佳歌曲
二
vli>當(dāng)月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ol><!-第三層標(biāo)記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity30
二一
I
&多列表愛布(3)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標(biāo)記結(jié)束—>
vli>動(dòng)力火車火爆金曲一2000425
v/ol><!--用一'層標(biāo)記結(jié)束—>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity31
二
I
43列表就布（3）歿果
等有列表的冰套-MicrosoftInternetExplorer
文件（日編輯《0查看過）收藏（㈤工具（D和助比）
J畫H◎搜索」收藏夾W媒體3/，3?二］0口
地址（0>隹）Dg.HTML三］談轉(zhuǎn)到|鏈盤叫俺.
習(xí)阿頁-MP3立即搜索▼②攔截▼?工具.3巴站導(dǎo)航二J3）標(biāo)注
使用標(biāo)記<。1><li>產(chǎn)生的標(biāo)志列表嵌套
1.在歌曲庫中增加周惠的《約定》----2004.4.21
新增林憶蓮的《至少還有你》——-2000.4.21
王菲金曲：
《明月幾時(shí)有》
i.年度最佳歌曲
ii.當(dāng)月徘行榜第一
ii-MTV制作最佳作品
《快子》
《天空》
《爰哭鬼》
動(dòng)力火車火爆金曲一2000.4.25
總完畢國我的電腦
3B開始|0日⑨發(fā)》?》本地磁盎9：）I篁］Chap2-5Html語百|(zhì)②Ut"aEdit-32-R:\br…巷］有列表的嵌套-Mtcr...，桌面>>與弋。網(wǎng)運(yùn);二9G氧B313:56
2012-8-28SchoolofAppliedTechnologySoochowUniversity32
<
.
一泯合牽
二It
三?混合嵌套
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標(biāo)記<ul><H>產(chǎn)生的標(biāo)志列表嵌套v/h4>
二<ol><!--最外層標(biāo)記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標(biāo)記—>
《明月幾時(shí)有》
二<li>
<ul><!-第三層標(biāo)記->
:vli>年度最佳歌曲
二
vli>當(dāng)月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標(biāo)記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity33
二一
I
泯合It牽
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標(biāo)記結(jié)束—>
vli>動(dòng)力火車火爆金曲一2000425
v/ol><!--用一'層標(biāo)記結(jié)束—>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity34
二
I
閽合成步效果
的藉I-?-r
:拿開始IHe3
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年企業(yè)創(chuàng)新管理方法與實(shí)踐手冊
- 2025 小學(xué)四年級(jí)科學(xué)上冊土壤分層實(shí)驗(yàn)的操作要點(diǎn)課件
- 種子經(jīng)營生產(chǎn)管理制度
- 獸藥生產(chǎn)質(zhì)量部管理制度
- 初中英語《時(shí)態(tài)辨析》專項(xiàng)練習(xí)與答案 (100 題)
- 乳制品生產(chǎn)企業(yè)責(zé)任制度
- 服裝廠內(nèi)部生產(chǎn)管理制度
- 2025年企業(yè)信息安全風(fēng)險(xiǎn)評(píng)估與控制手冊
- 安全生產(chǎn)三級(jí)網(wǎng)格化制度
- 安委辦安全生產(chǎn)考核制度
- CJ/T 24-1999城市綠化和園林綠地用植物材料木本苗
- T/CECS 10378-2024建筑用輻射致冷涂料
- 潮玩行業(yè)研究報(bào)告：IP起萬物生
- 部編版小學(xué)語文四年級(jí)上冊習(xí)作《我的心兒怦怦跳》精美課件
- 湖南省永州市2025屆高一上數(shù)學(xué)期末學(xué)業(yè)質(zhì)量監(jiān)測模擬試題含解析
- 房屋過戶提公積金合同
- CJJT 164-2011 盾構(gòu)隧道管片質(zhì)量檢測技術(shù)標(biāo)準(zhǔn)
- 婚禮中心工作總結(jié)
- 《數(shù)字貿(mào)易學(xué)》教學(xué)大綱、二維碼試題及答案
- 嚴(yán)仁詞人生創(chuàng)作背景考述
- 大鎖孫天宇小品《時(shí)間都去哪了》臺(tái)詞劇本完整版-一年一度喜劇大賽
評(píng)論
0/150
提交評(píng)論