DIV+CSS學(xué)習(xí)教程之Logo鏈接

作者：admin 2010-08-16 10:37:29

本文向大家介紹一下DIV+CSS學(xué)習(xí)教程之Logo鏈接，一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎樣做呢，這里和大家分享一下。

一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了。相信本文介紹一定會(huì)讓你有所收獲。

DIV+CSS學(xué)習(xí)教程之Logo鏈接

一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了。前四節(jié)的大練習(xí)大家做的怎么樣？有沒(méi)有難度，如果你覺(jué)著有難度沒(méi)有關(guān)系，這節(jié)課，我?guī)е蠹易鲆幌逻@個(gè)練習(xí)！

【第一步整體布局與公共CSS定義】

我們先來(lái)分析一下這個(gè)頁(yè)面。

頁(yè)面主要分5大塊，頂部的Logo、導(dǎo)航條Nav、Banner、Content、Footer，如下圖

這樣HTML就很容易寫(xiě)出來(lái)了

<dividdivid="Logo"></div> 
<dividdivid="Nav"></div> 
<dividdivid="Banner"></div> 
<dividdivid="Content"></div> 
<dividdivid="Footer"></div>

因?yàn)檫@5塊的寬度都是900像素，并且都是水平居中的，所以相應(yīng)CSS代碼如下

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}  
 
#logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}

#p#
【第二步布局Logo欄】

首先我們需要把頁(yè)面上的logo給切割出來(lái)，其大小為173*46,名字為：logo.gif

一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，應(yīng)該怎么做呢，大家首先會(huì)想到，給圖片加上鏈接就可以了，代碼一般會(huì)這么寫(xiě)

<ahrefahref="#"id="logoLink"><imgsrcimgsrc="#"/></a>

不過(guò)KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達(dá)到上面說(shuō)的效果，并且HTML代碼就會(huì)更精簡(jiǎn)，少了<img...>，看看下面Logo欄的頁(yè)面代碼，紅色的為將logo.gif作為背景的鏈接

HTML代碼：

<dividdivid="Logo"> 
<ahrefahref="#"id="logoLink"></a> 
</div>

CSS代碼

#Logo{  
height:80px;  
}  
#logoLink{  
display:block;  
width:173px;  
height:46px;  
background:url(../Images/logo.gif)no-repeat;  
float:left;  
margin-top:20px;  
}

好到這里，頭部含有l(wèi)ogo的區(qū)域已經(jīng)寫(xiě)完，如果自己做不出來(lái)，源代碼如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<linkrellinkrel="stylesheet"type="text/css"href="CSS/css.css"/> 
<title>浮動(dòng)(float)頁(yè)面布局（上）alixixi.com整理</title> 
</head> 
<body> 
<dividdivid="Logo"> 
<ahrefahref="#"id="logoLink"></a> 
</div> 
<dividdivid="Nav"></div> 
<dividdivid="Banner"></div> 
<dividdivid="Content"></div> 
<dividdivid="Footer"></div> 
</body> 
</html> 
 
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}  
#Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  
 
#Logo{  
height:80px;  
}  
#logoLink{  
display:block;  
width:173px;  
height:46px;  
background:url(../Images/logo.gif)no-repeat;  
float:left;  
margin-top:20px;  
}

【第三步布局導(dǎo)航欄Nav】

頁(yè)面上的導(dǎo)航欄和第四節(jié)講的幾乎是一樣的，并且更簡(jiǎn)單些，這里我就不再給大家一步一步做，不會(huì)做的就去看第四節(jié)，這里我就直接把代碼發(fā)出來(lái)供大家學(xué)習(xí)
HTML代碼：

<dividdivid="Nav"> 
<ul> 
<li><ahrefahref="#">HOME</a></li> 
<li><ahrefahref="#">PHOTOS</a></li> 
<li><ahrefahref="#">ABOUT</a></li> 
<li><ahrefahref="#">LINKS</a></li> 
<li><ahrefahref="#">CONTACT</a></li> 
</ul> 
</div>

CSS代碼

#Nav{height:42px;}  
#Navul{  
height:42px;  
list-style:none;  
background:#56990c;  
}  
#Navulli{height:42px;float:left;}  
#Navullia{  
display:block;  
height:42px;  
color:#FFF;  
padding:010px;  
line-height:42px;  
font-size:14px;  
font-weight:bold;  
font-family:Arial;  
text-decoration:none;  
float:left;  
}  
#Navullia:hover{background:#68acd3;}

#p#【第四步Banner布局】

這個(gè)就更簡(jiǎn)單了，有兩種方法

第一種：將圖片作為<divid="Banner"></div>背景

第二種：直接將圖片插入<divid="Banner"></div>之間，代碼：<divid="Banner"><imgsrc=""/></div>
大家可以根據(jù)需求和實(shí)際情況選擇用哪一種，在這里我們用第一種
HTML代碼沒(méi)有什么變化，只需要在CSS里面定義一下就OK了

CSS代碼：

#Banner{  
height:290px;  
background:url(../Images/banner.jpg)no-repeat;  
}

做出來(lái)了嗎？做不出跟下面的源代碼比較一下吧~

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
<linkrellinkrel="stylesheet"type="text/css"href="CSS/css.css"/> 
<title>浮動(dòng)(float)頁(yè)面布局（上）alixixi.com整理</title> 
</head> 
<body> 
<dividdivid="Logo"> 
<ahrefahref="#"id="logoLink"></a> 
</div> 
<dividdivid="Nav"> 
<ul> 
<li><ahrefahref="#">HOME</a></li> 
<li><ahrefahref="#">PHOTOS</a></li> 
<li><ahrefahref="#">ABOUT</a></li> 
<li><ahrefahref="#">LINKS</a></li> 
<li><ahrefahref="#">CONTACT</a></li> 
</ul> 
</div> 
<dividdivid="Banner"></div> 
<dividdivid="Content"></div> 
<dividdivid="Footer"></div> 
</body> 
</html> 
 
body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}  
#Logo,#Nav,#Banner,#Content,#Footer{width:900px;margin:0auto;}  
 
#Logo{  
height:80px;  
}  
#logoLink{  
display:block;  
width:173px;  
height:46px;  
background:url(../Images/logo.gif)no-repeat;  
float:left;  
margin-top:20px;  
}  
 
#Nav{height:42px;}  
#Navul{  
height:42px;  
list-style:none;  
background:#56990c;  
}  
#Navulli{height:42px;float:left;}  
#Navullia{  
display:block;  
height:42px;  
color:#FFF;  
padding:010px;  
line-height:42px;  
font-size:14px;  
font-weight:bold;  
font-family:Arial;  
text-decoration:none;  
float:left;  
}  
#Navullia:hover{background:#68acd3;}  
 
#Banner{  
height:290px;  
background:url(../Images/banner.jpg)no-repeat;  
}

#p#【第五步內(nèi)容Content板塊布局】

從圖片上我們看到，內(nèi)容板塊分為左右兩個(gè)區(qū)域，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由于我們要將內(nèi)邊距設(shè)置成15px(這樣才會(huì)好看)，所以ContentL的寬度在CSS中就要設(shè)置成600-15*2=570px,而右側(cè)的ContentR則需要設(shè)置成300-15*2=270px；
HTML代碼：

<dividdivid="Content"> 
<dividdivid="ContentL">此處為左邊ContentL</div> 
<dividdivid="ContentR">此處為左邊ContentR</div> 
</div>

CSS代碼:

#Content#ContentL,#Content#ContentR{float:left;padding:15px;}  
#Content#ContentL{width:570px;background:#f0f0f0;}  
#Content#ContentR{width:270px;background:#d3e7f2;}

頁(yè)面效果：

內(nèi)容部分我們就先做到這里，最后我們?cè)俨季掷锩娴木唧w元素，下面接著來(lái)布局版權(quán)模塊(Footer)

【第六步Footer布局】

這部分結(jié)構(gòu)比較簡(jiǎn)單，大家只需要知道怎么布局就OK了
HTML代碼：

<dividdivid="Footer"> 
<p>CSS學(xué)習(xí)alixixi.com整理</p> 
<p>CSS學(xué)習(xí)alixixi.com整理</p> 
</div>

CSS代碼：

#Footer{  
text-align:center;  
background:#68acd3;  
padding:10px0;  
font-size:12px;  
font-family:Arial,Helvetica,sans-serif;  
color:#fff;  
line-height:20px;  
}

目前效果如下：