第5章列表與超鏈接_第1頁
第5章列表與超鏈接_第2頁
第5章列表與超鏈接_第3頁
第5章列表與超鏈接_第4頁
第5章列表與超鏈接_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

掌握列表的CSS樣式設(shè)置方法；掌握超鏈接的CSS樣式設(shè)置方法；掌握新聞塊和網(wǎng)站導(dǎo)航的制作方法。第5章列表與超鏈接學(xué)習(xí)目標(biāo)：第5章列表與超鏈接5.1案例：學(xué)院新聞塊與學(xué)院網(wǎng)站導(dǎo)航案例一：制作學(xué)院新聞塊將學(xué)院要聞所有內(nèi)容放入定義的塊中，新聞條目使用無序列表顯示。設(shè)置塊及相關(guān)元素的CSS屬性。瀏覽效果如圖5-1所示。具體要求如下：（1）塊的寬度width屬性值為460px、高度height屬性值為211px。（2）塊的邊框?yàn)?px、藍(lán)色（#036）、實(shí)線。（3）標(biāo)題行采用二級標(biāo)題、標(biāo)題行背景顏色為藍(lán)色（#036）、高度為30px、文字顏色為白色、文字大小為16px。（4）新聞條目超鏈接文字采用宋體、文字大小13px、文字顏色為灰色（#333）、行高28px、無下劃線。（5）鼠標(biāo)移到新聞條目文字時文字顏色為深紅色（#900）、有下劃線。第5章列表與超鏈接圖5-1學(xué)院要聞瀏覽效果第5章列表與超鏈接案例二：制作學(xué)院網(wǎng)站導(dǎo)航條導(dǎo)航條的內(nèi)容一般用無序列表來構(gòu)造，將導(dǎo)航條內(nèi)容放入一個定義的塊中，并設(shè)置塊及塊中列表項(xiàng)的相關(guān)屬性。瀏覽效果如圖5-2所示。要求如下：（1）導(dǎo)航條的寬度為1000px，高度為36px。（2）導(dǎo)航條的背景圖像為素材中的navbg1.jpg，該圖像平鋪到導(dǎo)航條上。（3）每兩個導(dǎo)航項(xiàng)之間有分隔條，分隔條圖像為navline.jpg。（4）每個導(dǎo)航項(xiàng)為超鏈接文字，文字采用宋體、大小14像素、文字為白色、粗體，無下劃線。（5）鼠標(biāo)移到超鏈接文字時，顯示淺藍(lán)色橢圓框，即背景圖像為navbg2.jpg。第5章列表與超鏈接5.2知識準(zhǔn)備5.2.1列表樣式設(shè)置List-style-type屬性：用于控制無序或有序列表的項(xiàng)目符號，譬如，無序列表的取值有disc、circle、square。List-style-image屬性：設(shè)置列表項(xiàng)的項(xiàng)目圖像，使列表的樣式更加美觀，其取值為圖像的url（地址）。List-style-position屬性：設(shè)置列表項(xiàng)目符號的位置，其取值有inside和outside兩種。List-style屬性：綜合設(shè)置列表樣式，可以代替上面三個屬性。格式如下：List-style：列表項(xiàng)目符號

列表項(xiàng)目符號的位置

列表項(xiàng)目圖像

第5章列表與超鏈接實(shí)際上，在網(wǎng)頁制作過程中，為了更高效地控制列表項(xiàng)目符號，通常將list-style的屬性值定義為none，然后通過為<li>設(shè)置背景圖像的方式實(shí)現(xiàn)不同的列表項(xiàng)目符號。下面舉例說明。例5-1

在網(wǎng)頁上創(chuàng)建無序列表，并設(shè)置列表樣式。如圖5-3所示：圖5-3列表樣式定義瀏覽效果第5章列表與超鏈接<body><h2>教學(xué)系部</h2><ul><li>計算機(jī)系</li><li>電子系</li><li>信息系</li><li>管理系</li><li>軟件系</li><li>航空系</li><li>基礎(chǔ)教學(xué)部</li></ul></body>1.搭建頁面結(jié)構(gòu)：2.設(shè)置CSS樣式：<styletype="text/css">li{

list-style:none;/*清除列表的默認(rèn)樣式*/ height:26px; line-height:26px; background:url(images/arror.jpg)no-repeatleftcenter;

padding-left:25px}</style>第5章列表與超鏈接例5-2通過自定義列表構(gòu)造網(wǎng)頁內(nèi)容，并設(shè)置CSS樣式。文件名：5-2.html制作圖文混排效果時，圖片往往放入dt標(biāo)記中，文字放入dd標(biāo)記中，然后設(shè)置dt和dd左浮動，使它們水平排列。第5章列表與超鏈接<body><divid="box"><dl><dt><imgsrc="images/sunmei.jpg"width="304"height="229"/></dt><dd><h2><span>孫梅</span>（計算機(jī)系優(yōu)秀畢業(yè)生風(fēng)采）</h2><h2>工作單位：北京時代風(fēng)標(biāo)科技有限公司</h2><p>孫梅，2006級計算機(jī)應(yīng)用技術(shù)專業(yè)。現(xiàn)就職于北京時代風(fēng)標(biāo)科技有限公司。專業(yè)的優(yōu)秀資深網(wǎng)站工程師和資深網(wǎng)站設(shè)計師,擁有上百個網(wǎng)站項(xiàng)目的成功案例，精通網(wǎng)站前端設(shè)計和網(wǎng)站后臺開發(fā)。</p></dd></dl></div></div></body>1.搭建頁面結(jié)構(gòu)：2.設(shè)置CSS樣式：略第5章列表與超鏈接5.2.2

超鏈接樣式設(shè)置在CSS中，通過鏈接偽類可以實(shí)現(xiàn)不同的鏈接狀態(tài)。所謂偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的。超鏈接標(biāo)記<a>的偽類有4種，如下所示：a:link{CSS樣式規(guī)則;}未訪問時超鏈接的狀態(tài)a:visited{CSS樣式規(guī)則;}訪問后超鏈接的狀態(tài)a:hover{CSS樣式規(guī)則;}鼠標(biāo)懸停時超鏈接的狀態(tài)a:active{CSS樣式規(guī)則;}鼠標(biāo)點(diǎn)擊不動時超鏈接的狀態(tài)通常在實(shí)際應(yīng)用時，只需要使用a:link、a:visited來定義未訪問和訪問后的樣式，而且a:link和a:visited定義相同的樣式；使用a:hover定義鼠標(biāo)懸停時超鏈接的樣式即可。有時干脆只定義a和a:hover的樣式。第5章列表與超鏈接5.2.2

超鏈接樣式設(shè)置例5-3

設(shè)置超鏈接文字的樣式，如下圖所示。文件名：5-3.html瀏覽網(wǎng)頁時，鼠標(biāo)移動到超鏈接文字時，文字變成桔紅色，且?guī)в邢聞澗€效果。第5章列表與超鏈接<body> <ahref="#">學(xué)院簡介</a> <ahref="#">學(xué)院新聞</a> <ahref="#">專業(yè)介紹</a> <ahref="#">招生就業(yè)</a></body>1.搭建頁面結(jié)構(gòu)：2.設(shè)置CSS樣式：<styletype="text/css">body{ padding:0; margin:0; font-size:16px; font-family:"微軟雅黑"; color:#3c3c3c;}a{ color:#4c4c4c; text-decoration:none;}a:hover{ color:#FF8400; text-decoration:underline;}</style>實(shí)際做網(wǎng)站時，都要對網(wǎng)站的超鏈接進(jìn)行個性化的設(shè)置，而一般不采用默認(rèn)的樣式。第5章列表與超鏈接5.3案例實(shí)現(xiàn)5.2.1制作學(xué)院新聞塊第5章列表與超鏈接<body><divid="news"><h2>學(xué)院要聞<span><ahref="#">MORE>></a></span></h2><ul><li><ahref="#">濰坊軍分區(qū)司令員萬偉峰來院調(diào)研</a></li><li><ahref="#">山東信息職業(yè)技術(shù)學(xué)院隆重召開慶祝中國共產(chǎn)黨成立92周年暨表彰</a></li><li><ahref="#">團(tuán)學(xué)口“迎評促建”總結(jié)表彰大會成功舉辦</a></li><li><ahref="#">“我的夢?中國夢”青春勵志講壇成功舉辦</a></li><li><ahref="#">山東信息職業(yè)技術(shù)學(xué)院第十一屆科技文化藝術(shù)節(jié)PPT制作大賽</a></li><li><ahref="#">計算機(jī)工程系在全國CaTICs網(wǎng)絡(luò)賽中喜獲團(tuán)體一等獎</a></li></ul></div></body>1.搭建頁面結(jié)構(gòu)：2.設(shè)置CSS樣式：代碼略。第5章列表與超鏈接5.3.2

制作學(xué)院網(wǎng)站導(dǎo)航條該導(dǎo)航條有8個導(dǎo)航項(xiàng)構(gòu)成，每兩個導(dǎo)航項(xiàng)之間有一個分隔條。導(dǎo)航條的項(xiàng)可以使用無序列表構(gòu)造，所有文字內(nèi)容放入一個塊中。因此首先在頁面中使用DIV定義一個塊，將列表項(xiàng)內(nèi)容放入塊中。再設(shè)置塊中各元素及超鏈接的CSS樣式，導(dǎo)航項(xiàng)右側(cè)的分隔條通過給列表項(xiàng)添加背景圖像來實(shí)現(xiàn)。第5章列表與超鏈接<body><divid="nav"><ul><li><ahref="#">網(wǎng)站首頁</a></li><li><ahref="#">學(xué)院概況</a></li><li><ahref="#">新聞中心</a></li><li><ahref="#">機(jī)構(gòu)設(shè)置</a></li><li><ahref="#">教學(xué)科研</a></li><li><ahref="#">團(tuán)學(xué)在線</a></li><li><ahref="#">招生就業(yè)</a></li><li><ahref="#">公共服務(wù)</a></li></ul></div></body>1.搭建頁面結(jié)構(gòu)：2.設(shè)置CSS樣式：代碼略。樣式表代碼中，最關(guān)鍵的樣式是設(shè)置列表項(xiàng)左浮動，使列表項(xiàng)水平排列；通過給列表項(xiàng)添加背景圖像添加分隔條，以及去掉最后一項(xiàng)的分隔條；鼠標(biāo)懸停時設(shè)置超鏈接元素為塊元素，通過設(shè)置背景圖像添加橢圓框背景圖像。本章介紹了列表和超鏈接元素的樣式設(shè)置方法。在網(wǎng)站建設(shè)中，一般重復(fù)的內(nèi)容大都用列表構(gòu)造。無序列表在使用時，一般是去掉其本身的項(xiàng)目符號，通過設(shè)置列表項(xiàng)背景圖像的方式添加個性化的項(xiàng)目符號。超鏈接元素設(shè)置樣式時，通常只設(shè)置a元素和a:hover元素的樣式即可。學(xué)院新聞塊和學(xué)院網(wǎng)站導(dǎo)航條案例是典型的新聞塊和導(dǎo)航條制作方法。切實(shí)理解這些案例的代碼可以制作出網(wǎng)頁中各種樣式的新聞塊和導(dǎo)航條。本章小結(jié)第5章列表與超鏈接一、填空題CSS樣式設(shè)置中，綜合設(shè)置無序列表的樣式屬性是：

。CSS樣式設(shè)置中，設(shè)置未訪問時超鏈接的狀態(tài)，使用的偽類是：

。CSS樣式設(shè)置中，設(shè)置訪問后超鏈接的狀態(tài)，使用的偽類是：

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論