web網頁導航練習

我在做導航練習時，是查看那些已經成功的網站的原始碼進行練習，希望通過這些成功的代碼可以學習到代碼背後前端工程師們的編程思路。
在查看原始碼中我也學習了很多以前忽視的細節，覺得受益匪淺啊。

當我開啟拉勾網的css檔案時，第一部分是用注釋的方式標記了文檔的時間，作者以及樣式表內部方便查看的某些元素的顏色及寬高。
第二部分是一些初始化的元素樣式，及初始化的公用類。
第三部分是網頁各個部分的樣式。

• 我做的第一個導航練習是拉勾網的導航。

  
  

  lagou_nav.jpg

  觀察與思考
  1、這個導航需要寫幾層嵌套呢？
  2、要不要設定寬度，還是使用100%？
  3、如何置中啊？
  4、登入與註冊中間的那個細線怎麼實現。
  這些是我發現的問題，肯定隨著做的過程中還會有問題。

• 設定包圍元素樣式

    #header{      background: #fafafa;      height: 60px;      min-width: 1024px;      border-top: 3px solid #00B38A;  }  #header .wrapper{      width: 1024px;      margin: 0 auto;  }

  1、最外圍#header設定了導航的高度，以及導航的背景色，增添了border-top的樣式。
  2、內部.wrapper設定了寬度，外部#header設定了最小寬度，二者屬性值一樣。當然顯示屏的寬度肯定大於1024px,這樣在加上在.wrapper裡進行margin: 0 auto;可以實現寬度為1024的內容置中。

• 對導航元素進行基本布局

  
  

  step1.jpg

    .wrapper .logo{      float: left;      margin-top: 7px;      width: 229px;      height: 43px;      background: url(image/logo.png) no-repeat;  }  .wrapper .navheader{      float: left;      margin-left: 30px;  }  .navheader li{      float: left;  }  .wrapper .loginTop{      float: right;  }  .loginTop li{      float: left;  }

  1、設定logo時，圖片原來的尺寸就是229×43，所以這樣設定並不會展開圖片。
  2、logo與導覽功能表均左浮動，登入註冊按鈕向右浮動。

• 對導覽功能表進行基本樣式修飾
  注意：當滑鼠經過a時，需要有一個3px的border-bottom，但是這個3px不能超過#header，需要做的就是讓li的高度為60px，讓a的高度為57px，這樣當滑鼠經過時，顯示底邊，不會突出。

  
  

  2015-01-18_200656.jpg

    .navheader li{      height: 60px;      padding: 0px 20px;                  }  .navheader li a{      display: block;      line-height: 57px;      text-decoration: none;      color: #999;      font-size: 20px;  }  .navheader li a:hover{      color: #333;      border-bottom: 3px solid #00B38A;  }  .loginTop li{      height: 30px;      line-height: 30px;      color: #FFF;      background: #00B38A;  }  .loginTop li a{      display: block;      line-height: 30px;      padding: 0px 10px;      color: #fff;      text-decoration:none ;  }  .loginTop li a:hover{      color: #CCEAE3;  }

  1、a為行內元素需要將他轉化為區塊層級元素，這樣才能夠設定高度。行內元素如果不設定為塊級，直接設定行高，雖然也可以改變高度，並且佔據文檔流，但是行高所佔據的空白並不會是屬於a的。
  2、細心的可以發現，我為每一個a只設定了行高，並沒有設定高度，因為在IE6、7版本的瀏覽器，我發現未設定高度時，我發現a並沒有具備真正的區塊層級元素具備的那樣，寬度充斥父元素。但是設定了高度後，發現他們一下子具備了區塊層級元素的特點。但是我們不想讓他那樣，所以我就不寫高度了。這樣效果均相容。如果寫了呢，也很簡單只要為a補上一個float:left
  3、ie6，並不支援png格式的圖片。。。。。

• 其實乍一看，貌似具備了長相，但是我發現，我滑鼠經過菜單，菜單的變化是一個漸層的，而不是突然，。

    .navheader a,.loginTop a{      transition: all .2s ease-in-out ;      -webkit-transition: all .2s ease-in-out ;      -moz-transition: all .2s ease-in-out ;      -o-transition: all .2s ease-in-out ;  }

  transition這個屬性可以設定，當某個元素的某個樣式改變時，可以進行漸層的變化。他可以實現更精彩的畫面，需要學習html5的相關知識。會繼續學習的。

• *{outline:none;}設定所有元素的輪廓預設為無。

• body,p,a,span,ul,li{margin: 0;padding: 0;}設定所有元素的內外邊距為0。

• ul.reset{list-style:none;}去除掉列表的預設樣式

• 首先分出body與footer兩個部分。這裡面還涉及相應的height與min-height設定，但是這些又涉及一些相容的問題，所以我就先不寫了，回頭再另寫一篇。

• 最外層嵌套使用id='header'標記，方便尋找裡面子項目，裡面就可以用class啦，.wrapper可以用作包圍元素做公用類使用。class="navheader"與class="loginTop"可以作為尋找元素使用。

• ul>li>a，一般的導航基本上都是這樣的結構。

• ul前的a可以以背景為圖片，做連結。

• 第一步：設計出html結構，並為元素設定相應的id與類

      <p id='body'>        <p id="header">            <p class="wrapper">                <a class="logo" href=""></a>                <ul class="navheader reset">                    <li><a href="">首頁</a></li>                    <li><a href="">論壇</a></li>                    <li><a href="">我的簡曆</a></li>                    <li><a href="">發布職位</a></li>                </ul>                <ul class="loginTop reset">                    <li><a href="">登入</a></li>                    <li>|</li>                    <li><a href="">註冊</a></li>                </ul>            </p>        </p>                </p>    <p id="footer">    </p>

• 對網頁進行全域的css設定。
  我先寫下做導航時我用到的

• 對導航進行css設定