第3章網(wǎng)頁Logo和Banner及超鏈接

第3章網(wǎng)頁Logo和Banner及超鏈接網(wǎng)站綜合開發(fā)解析背景的設(shè)置可以采用兩種方式：顏色設(shè)置背景、圖片設(shè)置背景。用background-repeat屬性來設(shè)置背景的重復(fù)方式。用background-attachment屬性來設(shè)置背景圖片是否隨文字的移動而移動。用background-position屬性值來設(shè)置背景圖片的定位。CSS標(biāo)記只能顯示一種背景屬性，除了設(shè)置body的背景屬性外，還要定義多個不同的CSS類，并在其中定義背景屬性，以達(dá)到設(shè)置多個背景的效果?？梢詫⒈尘皹邮降亩鄺lCSS屬性寫到一行代碼中。上章回顧本章進(jìn)階掌握圖像Logo的制作方法掌握圖像Banner的制作方法掌握網(wǎng)頁中超鏈接的常用樣式Logo和Banner的相關(guān)知識

Logo和Banner的介紹Logo是企業(yè)綜合信息傳遞的媒介。Banner是一種網(wǎng)絡(luò)廣告形式。Logo和Banner的相關(guān)知識盒子模型回顧Logo和Banner的相關(guān)知識CSS邊框?qū)傩訡SS屬性名稱border(border-top、border-right、border-bottom、border-left)相關(guān)屬性值border-style可設(shè)為none、hidden、dashen、dotted、soild等border-width可設(shè)為關(guān)鍵字或具體單位數(shù)值border-color可設(shè)為RGB顏色分量、十六進(jìn)制顏色值、顏色英文關(guān)鍵詞Logo和Banner的相關(guān)知識CSS內(nèi)邊距屬性CSS屬性名稱padding(padding-top、padding-right、padding-bottom、padding-left)相關(guān)屬性值單位數(shù)值，百分比CSS外邊距屬性CSS屬性名稱margin(margin-top、margin-right、margin-bottom、margin-left)相關(guān)屬性值單位數(shù)值，百分比Logo和Banner的相關(guān)知識創(chuàng)建一個邊框?qū)挒?0px，外邊距為50px，內(nèi)邊距為20px的div塊元素。Logo和Banner的相關(guān)知識

Id與class選擇器在CSS文件里書寫時，id選擇器加前輟“#”，class選擇器加前輟“.”。一個頁面只可以使用一次id選擇器，而class選擇器可以多次使用。

id選擇器，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容；class選擇器是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上。

id選擇器是先找到結(jié)構(gòu)或內(nèi)容，再給它定義樣式；class選擇器是先定義好一種樣式，再套用于多個結(jié)構(gòu)或內(nèi)容。制作圖像Logo效果圖的分析

本例效果圖本例的最終效果圖制作圖像Logo頁面結(jié)構(gòu)的制作<divclass="content"><divclass="logo"></div></div>結(jié)構(gòu)圖制作圖像LogoLogo圖片位置的確定整體頁面背景制作定義body的樣式：body{background:#000;margin:0px; padding:0px;}制作圖像Logo對主體樣式進(jìn)行定義.content{width:820px;margin:0auto;}對Logo圖片進(jìn)行定義.logo{width:300px; float:left; margin-top:240px;}制作圖像Banner效果圖分析制作圖像Banner網(wǎng)頁結(jié)構(gòu)的制作<divclass="content"><divclass="logo"><imgsrc="logo.jpg"/></div><divclass="banner"><imgsrc="banner.jpg"/></div></div>

結(jié)構(gòu)圖制作圖像BannerBanner位置的確定.banner{width:520px;float:right;margin-top:150px;}超鏈接超鏈接類型按照使用對象的不同，分為文本超鏈接、圖像超鏈接、E-maill鏈接、錨點(diǎn)鏈接、多媒體文件連接、空鏈接等。按照鏈接路徑的不同，分為內(nèi)部鏈接、錨點(diǎn)鏈接和外部鏈接。按照鏈接樣式是否會產(chǎn)生除本身默認(rèn)效果外的特殊效果，分為動態(tài)超鏈接和靜態(tài)超鏈接。

超鏈接超鏈接的組成及偽類

在網(wǎng)頁中，超鏈接是通過<a>標(biāo)簽來實(shí)現(xiàn)的，鏈接地址通過<a>標(biāo)簽的href屬性來實(shí)現(xiàn)。<ahref="#">網(wǎng)站綜合開發(fā)解析</a>

屬性說明link超鏈接在普通狀態(tài)下的樣式visited已訪問的超鏈接樣式hover鼠標(biāo)指針經(jīng)過鏈接時的樣式active當(dāng)前激活狀態(tài)的超鏈接樣式在書寫時，超鏈接的偽類是有一定順序的，其正常順序是a:link、a:visited、a:hover、a:active。其中可以對某個偽類不加定義，但是要定義，就必須按照這個順序。超鏈接添加a:link屬性在樣式表中加入a:link{}，定義鏈接為紅色文字，沒有下劃線。a:link{ color:#F00; text-decoration:none;}超鏈接

添加a:visited屬性

a:visited是指訪問過的鏈接樣式，改變文字和刪除線的效果:a:visited{color:#390;text-decoration:line-through;}超鏈接

添加a:hover屬性

a:hover用來判斷當(dāng)前鼠標(biāo)的位置是否是一個鏈接。通常用各種各樣的創(chuàng)意來定義a:link、a:hover屬性，以吸引用戶注意到鏈接。a:link{color:#F00;text-decoration:none;}超鏈接添加a:active屬性a:active屬性一般很少用，主要是因?yàn)楫?dāng)用戶單擊完一個鏈接之后，鼠標(biāo)焦點(diǎn)很容易就會從當(dāng)前激活的鏈接轉(zhuǎn)移到其它地方，此時該鏈接就不是當(dāng)前激活狀態(tài)，從而使a:active屬性失效。超鏈接定義多個超鏈接樣式

.test1a{}.test1a:link{}.test1a:visited{}.test1a:hover{}.test1a:active{}

.test2a{}.test2a:link{}.test2a:visited{}.test2a:hover{}.test2a:active{}

在一個網(wǎng)站中制作多種鏈接樣式有很多種方法，本質(zhì)上就是向class或id中添加鏈接的偽類屬性，之后該偽類屬性就會直接定義該class或id所對應(yīng)的內(nèi)容中。<ahref="#"class="test2">鏈接樣式</a>超鏈接

對整體頁面進(jìn)行樣式和結(jié)構(gòu)定義<divclass="main"><h1class="s1"> <ahref=“#”>王蒙：……</a></h1>……</div>body{font-size:12px;color:#666;}.main{width:360px;border:1pxsolid#CCC;padding:10px;text-align:center;line-height:20px;}h1{font-size:16px;}.xuxian{border-bottom:1pxdotted#CCC;height:12px;line-height:1px;}對整體的樣式進(jìn)行定義

→超鏈接

對網(wǎng)頁的默認(rèn)鏈接樣式進(jìn)行定義a{color:#666;text-decoration:none;}a:hover{color:#C00;text-decoration:underline;}超鏈接

對新聞部分大標(biāo)題添加鏈接樣式

.s1a{color:#C00;text-decoration:none;}.s1a:hover{color:#00F;text-decoration:underline;}

超鏈接

對熱書添加鏈接樣式

.s2a{color:#F60;text-decoration:none;}.s2a:hover{color:#F00;text-decoration:underline;}

綜合實(shí)例效果圖的分析

攜程旅行網(wǎng)的頂部內(nèi)容——頁面整體主色調(diào)采用了大自然中的藍(lán)色，幽靜深遠(yuǎn)的大自然之色，表達(dá)了人對大自然的無限向往以及寧靜廣闊的心靈感受。綜合實(shí)例頁面結(jié)構(gòu)的制作

<divclass="header"><divclass="toolkit"><divclass="contact"></div><divclass="login"></div><divclass="links"></div></div><ulclass="pagehead"><liclass="logo"></li><liclass="banner"></li><liclass="submenu"></li></ul></div>綜合實(shí)例頁面內(nèi)容及樣式制作

整體樣式的定義body{padding:0;margin:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#000;}Img{border-style:none;}ul{margin:0;padding:0;list-style:none;}a{color:#05a;text-decoration:none;}a:hover{color:#05a;text-decoration:underline;}綜合實(shí)例對header的樣式進(jìn)行定義

header是頂部文件的塊，頂部文件的所有內(nèi)容都將放在header中。應(yīng)先計算出頂部文件所占的寬度，再設(shè)置header居中屬性。.header{width:950px;margin:0auto;}綜合實(shí)例

對toolkit的樣式進(jìn)行定義

<divclass="toolkit"><divclass="contact"><spanclass="contact_tel">800-820-6666</span><spanclass=“contact_mobile”>1010-6666（免長途話費(fèi)）</span></div><divclass="login"><ahref="#">登錄</a><ahref="#">合作卡</a><ahref="#">注冊</a></div><divclass="links"><ahref="#">我的攜程</a><ahref="#">積分獎勵</a><ahref="#">幫助中心</a></div></div>在HTML代碼中添加聯(lián)系區(qū)，用<span>標(biāo)簽制作。綜合實(shí)例.toolkit{height:30px;line-height:30px;border-right:1pxsolid#cee4f7;border-bottom:1pxsolid#cee4f7;border-left:1pxsolid#cee4f7;background:url(../images/bg_toolkit.gif)repeat-x;}分析效果圖，對<div>及<span>標(biāo)簽進(jìn)行定義.contact{float:left;padding-left:10px;}.contactspan{float:left;}.contact_tel,.contact_mobile,{margin-right:8px;padding-left:20px;}.contact_tel{background:url(../images/iocn_tel.png)no-repeat0px8px;}.contact_mobile{background:url(../images/iocn_mobile.png)no-repeat5px8px;}綜合實(shí)例

對pagehead進(jìn)行定義<ulclass="pagehead"><liclass="logo"><ahref="#"><imgsrc="images/logo.gif"title="攜程旅行網(wǎng)"/></a></li><liclass="banner"><ahref="#"><imgsrc="images/banner.jpg"/></a></li><liclass="submenu"><ahref="#"title="手機(jī)版">手機(jī)版</a><ahref="#"title="繁體版">繁體版</a><ahref="#"title="English">English</a></li></ul>

pagehead類樣式里有一個<ul>標(biāo)簽和三個<li>標(biāo)簽。綜合實(shí)例.pagehead{width:100%;padding:10px0px;}

按照HTML代碼順序，先對pagehead進(jìn)行樣式定義。根據(jù)效果圖可知，只