徹底弄懂CSS盒子模式之二 - CSS+DIV -

徹底弄懂CSS盒子模式之二

時間:2013-08-13 12:43:43   來源:   評論:加載中...   點擊:加載中...
用CSS做導航欄也是輕而易舉的事情,在本人之前發表的教程中其實也有一個簡單的橫向導航欄制作,那時只給出了樣式代碼并沒有作太多的解釋,這次要做一個相對復雜點的導航欄,為了加深大家對CSS盒子模式的理解,特別...

用CSS做導航欄也是輕而易舉的事情,在本人之前發表的教程中其實也有一個簡單的橫向導航欄制作,那時只給出了樣式代碼并沒有作太多的解釋,這次要做一個相對復雜點的導航欄,為了加深大家對CSS盒子模式的理解,特別選做一個有多個盒子嵌套實現的導航欄。

先看實現原理動畫演示:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>徹底弄懂CSS盒子模式(導航欄實例詳解)</title>
<style type="text/css">
<!--
* {
 margin: 0px;
 padding: 0px;
 }
#nav {
 background: url() no-repeat left center ;
 height: 35px;
 width: 190px;
 padding-top:15px;
}

#nav a {
 background: url(
);
 color: #FFFFFF;
}
-->
</style>
</head>

<body>
<ul id="nav">
 <li>
   <a href="#">徹底弄懂CSS盒子模式1</a>
 </li>
 
 <li>
   <a href="#">徹底弄懂CSS盒子模式2</a>
 </li>
 
 <li>
   <a href="#">徹底弄懂CSS盒子模式3</a>
 </li>
 
 <li>
   <a href="#">徹底弄懂CSS盒子模式4</a>
 </li>
 
 <li>
   <a href="#">徹底弄懂CSS盒子模式5</a>
 </li>
</ul>
</body>
</html>

現在再看結果圖:



這個導航欄中的鏈接用到了背景圖片的切換效果,鼠標移到鏈接上導航欄背景圖片和文字顏色都會跟著改變,整個導航用到下列4幅圖片素材:


 即鏈接不同狀態的兩張背景圖片,每條導航左邊的“勾月”圖形,最外邊大盒子1像素高的背景圖片。

  看了動畫演示和結果圖,也了解了用到那些素材,現在就請你帶著一股好奇和我一起來完成這個導航欄吧,當做完這個導航欄之后你會發現原來DIV排版那么簡單。愿你更有信心學好DIV排版!



這個導航欄中的鏈接用到了背景圖片的切換效果,鼠標移到鏈接上導航欄背景圖片和文字顏色都會跟著改變,整個導航用到下列4幅圖片素材:


 即鏈接不同狀態的兩張背景圖片,每條導航左邊的“勾月”圖形,最外邊大盒子1像素高的背景圖片。

  看了動畫演示和結果圖,也了解了用到那些素材,現在就請你帶著一股好奇和我一起來完成這個導航欄吧,當做完這個導航欄之后你會發現原來DIV排版那么簡單。愿你更有信心學好DIV排版!



相關熱詞搜索:

 
上一篇:徹底弄懂CSS盒子模式之一
下一篇:徹底弄懂CSS盒子模式之三
收藏 將此文推薦給朋友
10个数复式三中三多少组公式