DIV+CSS學習教程之Logo鏈接(2)

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS學習教程之Logo鏈接(2)

編輯：CSS詳解

【第二步布局Logo欄】

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

一般網站都會做到點擊logo，就會回到主頁，應該怎麼做呢，大家首先會想到，給圖片加上鏈接就可以了，代碼一般會這麼寫

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

不過KwooJan要介紹另外一種方法，將圖片做成鏈接a的背景，同樣可以達到上面說的效果，並且Html代碼就會更精簡，少了<img...>，看看下面Logo欄的頁面代碼，紅色的為將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;  
}

好到這裡，頭部含有logo的區域已經寫完，如果自己做不出來，源代碼如下：

<!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>浮動(float)頁面布局（上）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;  
}

【第三步布局導航欄Nav】

頁面上的導航欄和第四節講的幾乎是一樣的，並且更簡單些，這裡我就不再給大家一步一步做，不會做的就去看第四節，這裡我就直接把代碼發出來供大家學習
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;}

上一頁:DIV+CSS學習教程之Logo鏈接(3)
下一頁:DIV+CSS學習教程之Logo鏈接(1)

CSS詳解

CSS教程：詳解margin和padding屬性應用場合: margin和padding的意義相信大家都很清楚，可是在具體應用中，到底應該使用哪一個，就比較難
五大常用Div高度自適應的方法(1): 你對Div高度自適應的方法是否了解，這裡和大家分享一下5種常用Div高度自適應的方法，希望對你的學
非首位子元素選擇器加號“+”的使用: 前方元素 + 目標元素樣式只會匹配緊跟其前方元素的同胞元素，選擇器中的元素有同一個父親，而且第二個

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章