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=&#39;moreNav&#39;>
                               <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的前置圖示。

  
  

  web網頁導航練習（二）

  當我設定圖示與文字首頁居中時遇到了麻煩，原因是由於web網頁導航練習（二）對vertical-line：middle;的渲染情況不一致。

  
  

  現代瀏覽器

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

  
  

  web網頁導航練習（二）

  與現代瀏覽器一樣的設置，卻造成不一樣的觀賞效果。是因為什麼，我也說不清楚，但是可以看出規律，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、果殼網前端工程師在設置前置圖標樣式時，他分別進行了設置，一個通用設置，設置了背景圖片的來源，轉換了表現形式，設置了居中，於是當除了首頁這樣的前置圖示也可以使用這個公有樣式。
  然後單獨設定一個樣式，設定了圖片的位置，以及大小，還有邊距等的專門設定。

• 設定正三角與倒三角形

  
  

  #web網頁導航練習（二）

   .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这个属性具有继承性，他表示前景色，不仅设置文本的颜色，还设置了边框的颜色。在web網頁導航練習（二）会发现识别不出透明色，然后通过分别设置前景色来改变border的颜色。
  3、绿色箭头采用绝对定位。下拉箭头采用行内块级元素进行定位。

• 设置子菜单

  
  

  web網頁導航練習（二）

   #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>里,因为这些行内元素，我们通过将其修饰，然后放置一些下拉箭头，首页图标，鼠标点击标记。

• 第三步：对导航元素进行基本布局

  
  

  web網頁導航練習（二）

         .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视频教程

以上是web網頁導航練習（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！