web網頁導航練習（二）

我另一個的導航練習是參考果殼網的導航進行的，查看原始碼時，發現這家網站的css代碼寫的真清晰，類的組織也很棒，雖然我不是很懂，但就是看著很喜歡。

果殼網導航

第一次看到這個導航，會有幾點是需要我仔細想一想的
1、首頁前面的小房子表徵圖該嵌套在哪一個元素內
2、首頁下面的小三角是怎麼實現的
3、更多後面的三角？
4、點擊更多後，出現的下拉式功能表，如何?？
我先只實現左面，就可以聯絡好多知識點。

• 第一步：設計相應的html結構，並標記id與類

           <p id="gheader">             <p class="gh-wrap">                 <p class="fl">                     <ul class="gh-nav reset">                         <li>                             <a href="">                                 <span class="gnicon-home"></span>                                 首頁                                 <b class="gnarrow-up"></b>                                                                 </a>                         </li>                         <li><a href="">科學人</a></li>                         <li><a href="">小組</a></li>                         <li><a href="">問答</a></li>                         <li><a href="">Mooc學院</a></li>                         <li><a href="">知性</a></li>                         <li id='moreNav'>                             <a href="" class="">                                 更多                                 <i class="gnarrow-down"></i>                             </a>                             <p class="gh-list">                                 <ul class="reset">                                     <li><a href="">日誌</a></li>                                     <li><a href="">活動</a></li>                                     <li><a href="">在行</a></li>                                     <li><a href="">十五言</a></li>                                     <li><a href="">研究生</a></li>                                 </ul>                             </p>                         </li>                     </ul>                 </p>             </p>         </p>

  1、這個的html結構同樣也是兩層p包裹內容#gheader .gh-wrap外層是為了表明頭部，裡層可以用作樣式以及整個頭部部分的位置調整
  2、不同於上一個導航練習，這個在ul外部又包圍了一層，是因為原來網頁的頭部，左面是導航+搜尋，右面是訊息提醒。一個左浮動一個右浮動。這樣結構更清晰。
  3、

• 連結a的前置表徵圖。

  
  

  2015-01-19_144747.jpg

  當我設定表徵圖與文本首頁置中時遇到了麻煩，原因是由於IE6、7對vertical-line：middle;的渲染情況不一致。

  
  

  現代瀏覽器

  就不附加代碼了，我描述一下，被紅色邊框框住的內容設定了高度，設定了行高，且二者相等。那麼常值內容自然置中。
  為圖片設定vertical-line:middle;的意思是把圖片放在所在行的中部，於是該圖片就找到了已經置中的常值內容的底部（圖片矮）或頂部（圖片高）。

  
  

  IE6、7

  與現代瀏覽器一樣的設定，卻造成不一樣的觀賞效果。是因為什麼，我也說不清楚，但是可以看出規律，ie6、7選擇將圖片與文本都放在最上部，且二者置中對齊。
  所以就想到了一個相容的解決方案，選擇將前置表徵圖與文本的外圍元素a，的高度設為與圖片一樣高，並設定高度等於行高，則可以讓文本置中，而圖片設定vertical-line：middle;則可以與a內的文字頂部或底部對齊。也可以水平對齊（ie6、7）。

  .gh-wrap .gh-nav li a{    display: inline-block;    height: 18px;    line-height: 18px;    padding: 11px;    text-decoration: none;    color: #d5d5d5;}.gh-nav li a:hover{    background: #393939;    color: #fff;}.gnicon-home{    background: url(gk/5-icon.png) transparent no-repeat;    display: inline-block;    vertical-align: middle;}.gh-nav  a .gnicon-home{    background-position: 0 0;    height: 18px;    width: 16px;    margin-right:5px ;}

  1、細心的可以發現，我重新設定了a的樣式，因為要為a設定高度，擔心像上篇筆記擔心的那樣，寬度會充斥父元素，於是我將行內元素轉換為行內區塊層級元素，轉換方法這篇筆記也提到過，其實關於vertical-line的現代瀏覽器表現我也做過筆記在這裡。
  2、果殼網前端工程師在設定前置表徵圖樣式時，他分別進行了設定，一個通用設定，設定了背景圖片的來源，轉換了表現形式，設定了置中，於是當除了首頁這樣的前置表徵圖也可以使用這個公有樣式。
  然後單獨設定一個樣式，設定了圖片的位置，以及大小，還有邊距等的專門設定。

• 設定正三角與倒三角

  
  

  2015-01-19_171118.jpg

   .gnarrow-down,.gnarrow-up{     line-height: 0;     height: 0;     width: 0;     border: 4px solid transparent;     color: #4c4c4c; } .gnarrow-up{     position: absolute;     border-bottom-color: #85C155;     bottom: 0;     left: 50%;     margin-left: -4px; } .gnarrow-down{     display: inline-block;     vertical-align: middle;     border-top-color:#d5d5d5 ;     border-width: 3px;     margin-left: 3px; } .gh-nav li a:hover{     background: #393939;     color: #fff; } .gh-nav li a:hover i,.gh-nav li a:hover b{     color: #393939; }

  1、設定這個三角，其實是很有技巧性的，覺得真的是對css瞭解的非常熟悉，才能想到這樣的技巧。內容置空，寬度高度為0，設定其邊框，然後通過分別設定上下左右的邊框的顏色，可以獲得各個方向的三角。
  2、注意：color這個屬性具有繼承性，他表示前景色彩，不僅設定文本的顏色，還設定了邊框的顏色。在IE6、7會發現識別不出透明色，然後通過分別設定前景色彩來改變border的顏色。
  3、綠色箭頭採用絕對位置。下拉式箭頭採用行內區塊層級元素進行定位。

• 設定子功能表

  
  

  2015-01-19_180822.jpg

   #moreNav .gh-list{     position: absolute;     right: 0;     top: 40px;     width: 80px;     border: 1px solid #e0e0e0;     box-shadow: 1px 1px 1px #f3f3f3;     background: #fff;     padding: 7px 0 8px; } #moreNav .gh-list li {     /*之前設定過浮動*/     width: 100%;     height: 25px; } #moreNav .gh-list li a{     /*之前設定過表現形式為行內區塊層級元素，並設定過padding*/     width: 100%;     height: 25px;     text-align: center;     line-height: 25px;     padding: 0; } #moreNav .gh-list li a:hover{     background: #e0e0e0; }

  1、子功能表需要進行絕對位置。
  2、需要理解特製度的概念，我會專門寫這個的，因為我們在編寫css樣式規則時，卻發現這個規則先後順序不一樣，展示的效果不一樣，css規則寫的嵌套層次不一樣，展示的結果可能也不一樣，就像這裡我們之前都設定過li>a的樣式，所以會對子功能表的樣式有影響。
  3、繼承的樣式即使靠的再進，也沒有專門寫過的樣式優先順序高。例如，line-height具備繼承性，所以我就不打算為a寫行高，但是a的行高卻被之前設定的覆蓋了，卻沒有繼承父元素的樣子。

• 第二步 設定包圍元素樣式

     #gheader{       width: 100%;       height: 43px;       background: #4C4C4C;       position: fixed;       top: 0;       left: 0;       z-index: 999;   }   #gheader .gh-wrap{       height: 40px;       min-width: 1030px;       padding: 0 30px;       border-bottom: 3px solid #85c155;   }

  1、這是一個頭部固定的網頁，但是position:fixed一旦這麼設定，必然導致其寬度收縮內容，這樣就無法設定頭部背景啦，於是設定寬度值為100%。
  2、這裡面的包圍元素並沒有要置中，而是以預設的格式。所以沒有必要設定寬度，設定最小寬度就可以。當瀏覽器螢幕縮小時，也會有先收縮再維持的視覺效果。
  3、發現a裡面有很對<b> <span> <i>這類標籤，注意，我都放在了<a>裡,因為這些行內元素，我們通過將其修飾，然後放置一些下拉式箭頭，首頁表徵圖，滑鼠點擊標記。

• 第三步：對導航元素進行基本布局

  
  

  2015-01-19_112906.jpg

         .fl{       float: left;   }   #moreNav p{       display: none;   }   .gh-wrap .gh-nav li{       float: left;       position: relative;       height: 40px;   }   .gh-wrap .gh-nav li a{       display: block;       line-height: 40px;       padding: 0 10px;       text-decoration: none;       color: #d5d5d5;   }

  1、我先隱藏了二級菜單
  2、設定li為相對定位，目的是有助於二級菜單的定位
  3、a的設定較之前一致

• 修飾導航

這就是基本的導航的設定。雖然看著很簡單，但是只有自己編寫了才會發現之間的一些小小的細節。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程