我另一個(gè)的導(dǎo)航練習(xí)是參考果殼網(wǎng)的導(dǎo)航進(jìn)行的，查看源代碼時(shí)，發(fā)現(xiàn)這家網(wǎng)站的css代碼寫的真清晰，類的組織也很棒，雖然我不是很懂，但就是看著很喜歡。

果殼網(wǎng)導(dǎo)航

• 第一步：設(shè)計(jì)相應(yīng)的html結(jié)構(gòu)，并標(biāo)記id與類
  <div id="gheader">
  <div class="gh-wrap">
  <div 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="">科學(xué)人</a></li>
  <li><a href="">小組</a></li>
  <li><a href="">問答</a></li>
  <li><a href="">Mooc學(xué)院</a></li>
  <li><a href="">知性</a></li>
  <li id='moreNav'>
  <a href="" class="">
  更多
  <i class="gnarrow-down"></i>
  </a>
  <div class="gh-list">
  <ul class="reset">
  <li><a href="">日志</a></li>
  <li><a href="">活動(dòng)</a></li>
  <li><a href="">在行</a></li>
  <li><a href="">十五言</a></li>
  <li><a href="">研究生</a></li>
  </ul>
  </div>
  </li>
  </ul>
  </div>
  </div>
  </div>
  1、這個(gè)的html結(jié)構(gòu)同樣也是兩層div包裹內(nèi)容#gheader .gh-wrap外層是為了表明頭部，里層可以用作樣式以及整個(gè)頭部部分的位置調(diào)整
  2、不同于上一個(gè)導(dǎo)航練習(xí)，這個(gè)在ul外部又包圍了一層，是因?yàn)樵瓉砭W(wǎng)頁的頭部，左面是導(dǎo)航+搜索，右面是消息提醒。一個(gè)左浮動(dòng)一個(gè)右浮動(dòng)。這樣結(jié)構(gòu)更清晰。
  3、

• 第二步 設(shè)置包圍元素樣式

       #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、這是一個(gè)頭部固定的網(wǎng)頁，但是position:fixed一旦這么設(shè)置，必然導(dǎo)致其寬度收縮內(nèi)容，這樣就無法設(shè)置頭部背景啦，于是設(shè)置寬度值為100%。
2、這里面的包圍元素并沒有要居中，而是以默認(rèn)的格式。所以沒有必要設(shè)置寬度，設(shè)置最小寬度就可以。當(dāng)瀏覽器屏幕縮小時(shí)，也會有先收縮再維持的視覺效果。
3、發(fā)現(xiàn)a里面有很對<b> <span> <i>這類標(biāo)簽，注意，我都放在了<a>里,因?yàn)檫@些行內(nèi)元素，我們通過將其修飾，然后放置一些下拉箭頭，首頁圖標(biāo)，鼠標(biāo)點(diǎn)擊標(biāo)記。

• 第三步：對導(dǎo)航元素進(jìn)行基本布局
  
  2015-01-19_112906.jpg
  
  .fl{
  float: left;
  }
  #moreNav div{
  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、設(shè)置li為相對定位，目的是有助于二級菜單的定位
  3、a的設(shè)置較之前一致
• 修飾導(dǎo)航

  • 鏈接a的前置圖標(biāo)。
    

    2015-01-19_144747.jpg
    
    當(dāng)我設(shè)置圖標(biāo)與文本首頁居中時(shí)遇到了麻煩，原因是由于IE6、7對vertical-line：middle;的渲染情況不一致。
    
    現(xiàn)代瀏覽器
    
    就不附加代碼了，我描述一下，被紅色邊框框住的內(nèi)容設(shè)置了高度，設(shè)置了行高，且二者相等。那么文本內(nèi)容自然居中。
    為圖片設(shè)置vertical-line:middle;的意思是把圖片放在所在行的中部，于是該圖片就找到了已經(jīng)居中的文本內(nèi)容的底部（圖片矮）或頂部（圖片高）。
    
    IE6、7
    
    與現(xiàn)代瀏覽器一樣的設(shè)置，卻造成不一樣的觀賞效果。是因?yàn)槭裁矗乙舱f不清楚，但是可以看出規(guī)律，ie6、7選擇將圖片與文本都放在最上部，且二者居中對齊。
    所以就想到了一個(gè)兼容的解決方案，選擇將前置圖標(biāo)與文本的外圍元素a，的高度設(shè)為與圖片一樣高，并設(shè)置高度等于行高，則可以讓文本居中，而圖片設(shè)置vertical-line：middle;則可以與a內(nèi)的文字頂部或底部對齊。也可以水平對齊（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、細(xì)心的可以發(fā)現(xiàn)，我重新設(shè)置了a的樣式，因?yàn)橐獮閍設(shè)置高度，擔(dān)心像上篇筆記擔(dān)心的那樣，寬度會充斥父元素，于是我將行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊級元素，轉(zhuǎn)換方法這篇筆記也提到過，其實(shí)關(guān)于vertical-line的現(xiàn)代瀏覽器表現(xiàn)我也做過筆記在這里。
2、果殼網(wǎng)前端工程師在設(shè)置前置圖標(biāo)樣式時(shí)，他分別進(jìn)行了設(shè)置，一個(gè)通用設(shè)置，設(shè)置了背景圖片的來源，轉(zhuǎn)換了表現(xiàn)形式，設(shè)置了居中，于是當(dāng)除了首頁這樣的前置圖標(biāo)也可以使用這個(gè)公有樣式。
然后單獨(dú)設(shè)置一個(gè)樣式，設(shè)置了圖片的位置，以及大小，還有邊距等的專門設(shè)置。
* 設(shè)置正三角與倒三角

2015-01-19_171118.jpg

2015-01-19_180822.jpg

這就是基本的導(dǎo)航的設(shè)置。雖然看著很簡單，但是只有自己編寫了才會發(fā)現(xiàn)之間的一些小小的細(xì)節(jié)。