版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
I
表
■
?無杼擊列表
——序列表
—有序列表
?列表的酸步
2012-8-28SchoolSoochowUniversity2
無杼擊列表
?無標志列表
-指所要排列的內(nèi)容前后并無一定次序，在使
用時并不需要進行特別的組織，而且列表前
面不需要特定的標志符號，如數(shù)字等.
?創(chuàng)建無標志列表的方法
-＜br＞標記
-＜dl＞...v/dl＞標記和vdt＞或者vdd＞標記的組
合
2012-8-28SchoolofAppliedTechnologySoochowUniversity
另杼擊列表
利用vbr>標記創(chuàng)建無標志列表
<html>
<head>
<body>
vhl>流行快訊v/hl><!-創(chuàng)建標題樣式->
<fontsize=4color="#000080”>
劉德華武漢演唱會取消vbr>
超女冠軍昨晚決出vbr>
</font>
</body>
<html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity
二
I
vbr＞創(chuàng)建無標志列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity5
利用v(H＞…v/dl＞和vdt＞標記創(chuàng)建無標記列表
<html>
<body>
vh2>流行快訊v/h2><!-創(chuàng)建標題樣式->
<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＞標記創(chuàng)建無標記列表
<html>
<body>
vh3>流行快訊v/h3><!-創(chuàng)建標題樣式->
<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＞標記，不會產(chǎn)生縮進
?＜dl＞...v/dl＞和vdt＞組合,不會產(chǎn)生縮進
?vdl＞…v/dl＞和vdd＞組合，會產(chǎn)生帶縮進
的列表
2012-8-28SchoolofAppliedTechnologySoochowUniversity10
有杼擊列忐
?無序列表
-指列表前面有圓圈等類似的標志，但這些列
表之間并沒有什么順序，只是為了使得每個
條目更加醒目。
?有序列表
-指列表前面存在數(shù)字或者英文字母等有順序
的標志，表示這些列表之間存在一定的前后
順序。這樣不但使得列表更加醒目，而且表
明了列表之間的順序關(guān)系。
2012-8-28SchoolofAppliedTechnologySoochowUniversity11
..........麥左.烈盛.............
,創(chuàng)建考限
-<ul>.......v/ul>和vli>組合。
-格式：
?<ul>
-<li>第一個列表
-<li>第二個列表
?</ul>
-注意：Qi>是單標記，即一個一個表項的開始,就是
前一個表項的結(jié)束.
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＞兩個標簽可以設(shè)計出想到整
齊的文本段。
,不推薦使用vul＞和vli＞來開發(fā)網(wǎng)頁。
?一般推薦使用段落vp＞或分區(qū)顯示vdiv＞
顯示標記來格式化文本。
2012-8-28SchoolofAppliedTechnologySoochowUniversity16
二
I
I:單列表
w:1受前裹...................................
□：單列表是比較常用的無序列表，它往往用
■：于列出幾個相關(guān)網(wǎng)頁的索引，以便通過超鏈接
來很快選取感興趣的內(nèi)容。
工?格式為：
二.<menu>
q：<ih〉選單列表的標題
二：Qi〉第一個列表項
二〈廿〉第二個列表項
.?</menu>
,2012-8-28SchoolofAppliedTechnologySoochowUniversity17
二
I
單列表應用示例
?<html>
?<headxtitle>單歹U表應用示例</titleX/head>
?<body>
.<menu>
?<lhXfontsize=4>網(wǎng)頁設(shè)計過程
?</fontX/ln>
:<Li>打開編輯軟代
:<li>輸入HTML語言
?<li>保存文件
?<li>用瀏覽器瀏覽
.</menu>
:</body>
?</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity18
1:有序列表
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
,：?創(chuàng)建有序列表
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>專業(yè)設(shè)置v/b>v/funt>v/p>
<ol>
vli>計算機應用
4i>計算機軟件
4i>計算機圖形學
</ol>
</body>
</html>
2012-8-28SchoolofAppliedTechnologySoochowUniversity20
有序列表應用示例效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity21
有序列表
改變有序列表中的序號種類
-利用<。1〉或Gi>中的type屬性可設(shè)定5種序號：數(shù)字、大小寫
英文字母、大小寫羅馬字母。默認序號為數(shù)字。
-在〈。1〉指定的符號樣式，影響其所有序列表。
-格式為：—TypeNumberingstyle
序號》
<oltype=1arabicnumbers1,2,3,
<litype=序號,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
列表的愛步
-列表嵌套把主頁分為多個層次，例如書的
目錄，給人以很強的層次感。
嵌套方式：-
-自身列表嵌套
-混合嵌套
2012-8-28SchoolofAppliedTechnologySoochowUniversity23
<
.
一e多列表就布（1）
二
三?嵌套無標志列表
二<html>
vheadxtitle>列表嵌套的應用</title></head>
二
<bodytext=navy>
二vh4>使用標記<dt>產(chǎn)生無標志列表嵌套v/h4>
<
二dl><!--最外層標記-->
vdt>在歌曲庫中增加周惠的《約定》——2004.4.21
二
vdt>新增林憶蓮的《至少還有你》----2000.4.21
二vdl>王菲金曲：<!-第二層標記->
<dt>《明月幾時有》
二
<dl><!-第三層標記->
:vdt>年度最佳歌曲
二
vdt>當月排行榜第一
二?
vdt>MTV制作最佳作品
二?
?</dl><!-第三層標記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity24
二一
I
&多列表愛布(1)
<dt>《棋子》
<dt>《天空》
<dt>《愛哭鬼》
v/dl><!”第—?層標記結(jié)束-->
vdt>動力火車火爆金曲一2000.4.25
v/dl><!—第一1層標記結(jié)束-1>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity25
二
I
43列表就布（1）歿果
文件《日編輯也）查看（y）收藏（獨工具（D幫助（a）
◎總會◎搜索山收藏夾金媒體J二_V3，@
地址9）區(qū)1Dg.HTML
-3-網(wǎng)頁-MP3-立即搜索-②攔翻▼|令工a▼3網(wǎng)站導航▼包j松注
使用標記<d?產(chǎn)生的標志列表嵌套
在歌曲庫中增加周惠的《約定》-----2004.4.21
新增林憶蓮的《至少還有你》——2000.4.21
王菲金曲：
《明月幾時有》
年度最佳歌曲
當月排行榜第一
MTV制作最佳作品
《棋子》
《天空》
《爰哭鬼》
動力火車火爆荃曲一2000.4.25
，由完畢自我的電腦
;拿開蛤|MlG3傘多,A本地磁盤?：）j?]Chap2-5Html語言…|②UltraEda>32.[D:\br....11苞3列表嵌套的應用-…!桌面》三《?區(qū)cJ暮黑國13:27
2012-8-28SchoolofAppliedTechnologySoochowUniversity26
<
.
一e多列表愛布（2）
二
三?嵌套有標志的無序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產(chǎn)生的標志列表嵌套v/h4>
二<ul>最外層標記
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<ul>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<ul><!-第三層標記->
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity27
二一
I
&多列表愛布(2)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ul><!―.第—^層標記結(jié)束-->
vli>動力火車火爆金曲一2000425
v/ul><!--第一1層標記結(jié)束—>
</body>
</html>
?說明：
-有標志列表嵌套時，使用vul>、4i>組合標記會自動產(chǎn)生帶有
方框、圓圈等標志的列表效果
2012-8-28SchoolofAppliedTechnologySoochowUniversity28
43列表成布(2)歿果
2012-8-28SchoolofAppliedTechnologySoochowUniversity29
<
.
一e多列表愛布（3）
二
三?嵌套有標志的有序列表
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產(chǎn)生的標志列表嵌套v/h4>
二<ol><!--最外層標記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<oltype=i><!—第三層標記
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ol><!-第三層標記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity30
二一
I
&多列表愛布(3)
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標記結(jié)束—>
vli>動力火車火爆金曲一2000425
v/ol><!--用一'層標記結(jié)束—>
</body>
</html>
一2012-8-28SchoolofAppliedTechnologySoochowUniversity31
二
I
43列表就布（3）歿果
等有列表的冰套-MicrosoftInternetExplorer
文件（日編輯《0查看過）收藏（㈤工具（D和助比）
J畫H◎搜索」收藏夾W媒體3/，3?二］0口
地址（0>隹）Dg.HTML三］談轉(zhuǎn)到|鏈盤叫俺.
習阿頁-MP3立即搜索▼②攔截▼?工具.3巴站導航二J3）標注
使用標記<。1><li>產(chǎn)生的標志列表嵌套
1.在歌曲庫中增加周惠的《約定》----2004.4.21
新增林憶蓮的《至少還有你》——-2000.4.21
王菲金曲：
《明月幾時有》
i.年度最佳歌曲
ii.當月徘行榜第一
ii-MTV制作最佳作品
《快子》
《天空》
《爰哭鬼》
動力火車火爆金曲一2000.4.25
總完畢國我的電腦
3B開始|0日⑨發(fā)》?》本地磁盎9：）I篁］Chap2-5Html語百|(zhì)②Ut"aEdit-32-R:\br…巷］有列表的嵌套-Mtcr...，桌面>>與弋。網(wǎng)運;二9G氧B313:56
2012-8-28SchoolofAppliedTechnologySoochowUniversity32
<
.
一泯合牽
二It
三?混合嵌套
二<html>
列表的嵌套
二<head><title>Wv/title>v/head>
<bodytext=navy>
二vh4>使用標記<ul><H>產(chǎn)生的標志列表嵌套v/h4>
二<ol><!--最外層標記-->
vli>在歌曲庫中增加周惠的《約定》----2004.4.21
二
vli>新增林憶蓮的《至少還有你》----2000.4.21
二<oltype=a>王菲金曲：<!—第二層標記—>
《明月幾時有》
二<li>
<ul><!-第三層標記->
:vli>年度最佳歌曲
二
vli>當月排行榜第一
二?
vli>MTV制作最佳作品
二?
?</ul><!-第三層標記結(jié)束->
2012-8-28SchoolofAppliedTechnologySoochowUniversity33
二一
I
泯合It牽
<li>《棋子》
<li>《天空》
<li>《愛哭鬼》
v/ol><!--第—?層標記結(jié)束—>
vli>動力火車火爆金曲一2000425
v/ol><!--用一'層標記結(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)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度奶粉營養(yǎng)強化劑研發(fā)與應用合作協(xié)議樣本頁24篇
- 2025年度貨車司機聘用合同附帶駕駛員健康體檢協(xié)議3篇
- 2025年中國分時度假酒店行業(yè)市場發(fā)展現(xiàn)狀及投資方向研究報告
- 2025年度牧民草場承包合同范本附草原生態(tài)補償金發(fā)放協(xié)議4篇
- 2025年度苗木種植與農(nóng)業(yè)產(chǎn)業(yè)化發(fā)展合作協(xié)議4篇
- 2025年度冷鏈物流中心債權(quán)轉(zhuǎn)讓與倉儲服務(wù)合同
- 2024-2025年中國智能手機主流品牌行業(yè)發(fā)展?jié)摿Ψ治黾巴顿Y戰(zhàn)略咨詢報告
- 2025年二灰石混合料項目可行性研究報告
- 2025年保利龍項目可行性研究報告
- 2025年化學纖維絲綢織物等行業(yè)深度研究分析報告
- 醫(yī)學脂質(zhì)的構(gòu)成功能及分析專題課件
- 高技能人才培養(yǎng)的策略創(chuàng)新與實踐路徑
- 人教版（2024新版）七年級上冊英語期中+期末學業(yè)質(zhì)量測試卷 2套（含答案）
- 2024年湖北省中考數(shù)學試卷（含答案）
- 油煙機清洗安全合同協(xié)議書
- 2024年云南省中考數(shù)學試題（原卷版）
- 污水土地處理系統(tǒng)中雙酚A和雌激素的去除及微生物研究
- 氣胸病人的護理幻燈片
- 《地下建筑結(jié)構(gòu)》第二版(朱合華)中文(2)課件
- JB T 7946.1-2017鑄造鋁合金金相
- 包裝過程質(zhì)量控制
評論
0/150
提交評論