web網頁導航練習

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

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

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

  
  

  web網頁導航練習

  #觀察與思考
  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的內容居中。

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

  
  

  #web網頁導航練習

    .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，這樣當滑鼠經過時，顯示底邊，不會突出。

  
  

  web網頁導航練習

    .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<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>
  #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的相關知識。會繼續學習的。

• *{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}設定所有元素的輪廓預設為無。

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

• ul.<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式

• 首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。

• 最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。

• ul>li>a，一般的导航基本上都是这样的结构。

• ul前的a可以以背景为图片，做链接。

• 第一步：设计出html结构，并为元素设置相应的id与类

      <p>
          </p><p>
              </p><p>
                  <a></a>
                  </p>

                      
  • 首页
                      
  • 论坛
                      
  • 我的简历
                      
  • 发布职位
                  
                  
                      
  • 登录
                      
  • |
                      
  • 注册
                  
                                             

      

• 对网页进行全局的css设置。
  我先写下做导航时我用到的

• 对导航进行css设置

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