靜態網頁製作

標籤：style   blog   http   color   使用   os   

      總結下工作。問，為什麼開始看到這個作業的時候不知道如何下手呢？

     現在完成了，知道該怎麼去分解這個網頁，以圖中的分割線為準，可以這樣細分：

     這樣，再根據每個模組去細分，首先看header這個模組，可以看到有個logo大表徵圖，然後緊跟著是導航條。

 

   剛開始想把這兩部分作為兩個平級div嵌套在div header裡面，不過後面因為，哪個黃色的背景圖要嵌套在logo字下面，所以最後的布局是這樣的。

 

   這裡調試ul中的float:left，不是很清楚為啥會出現這種情況。這裡讓ul,li設定為float:left,然後注意下標籤a設定其為區塊層級元素display:block;並設定其高度和寬度，這是為了背景圖片能完整的顯示，當滑鼠移到相應的標籤時顯示圖片，我是這樣設定的：

#headernav ul li a:hover{
    color: #000000;
    background-image:url(image/nav_btn.png);
}

  OK，接著看中間的設定，首先看大概布局。

picture 圖片div的布局算是比較簡單的，就是開始想為什麼當圖片的寬度沒有那麼寬時，它是如何自動置中的，這是個問題，當寬度足夠長時，它是填充的，這個當然明了。

 接著分析下面的內容：

  contentleft裡面就是一個左側導覽列，這個也花了一點時間去琢磨。

  本來哪個框框我都不知道怎麼出來呢？ 然後問別人才知道要怎麼設計，首先是一個列表的形式因此想到ul和li的使用，ul中給它一個這樣的屬性 list-style-type: none;就可清除每個列表前的圓點。

  看下具體列表裡面的內容要怎麼去設計，首先每個列表前面有一個導航的表徵圖，這個表徵圖剛開始是用了img標籤，每個li裡面都放一個：

<li><a href="#"><img src="image/liicon2.png"/>&nbsp;&nbsp;公司諮詢</a></li> 。

不過當滑鼠移到標籤上時，不知道如何更改img的src屬性了，因此這種方式導致功能不完善，所以後面就改成給li一個背景圖。這樣設定：

#contentleft ul li{
width:170px;
height:33px;
line-height:30px;
float:left;
border:1px solid #D0D0D0;
margin-bottom:-1px;
background-image:url(image/liicon2.png);
background-repeat:no-repeat;
background-position:38px 12px;
}

 注意這兩個屬性：

background-repeat:no-repeat;
background-position:38px 12px;

  這是表徵圖正確呈現出原圖樣子的關鍵。

   OK，這樣設定好後，注意最後一個li框，它裡面是沒有任何東西的，你這樣添加背景圖，會把最後一個li框也加一張圖，所以又出現問題了，我要怎樣使最後一個li跟前面的不一樣，剛開始想的是用last-child屬性，也就是這樣設定：

#contentleft ul li:last-child{
background:none;}

不過這樣在IE8中是不識別的，所以，最後選了這種方案

 #contentleft ul li.lastchild{
background:none;}

<li class="lastchild"></li>

給最後一個li加個lastchild類。這樣的話，最後一個li框中就沒有背景圖了。

 然後再看下，滑鼠移到標籤上，背景圖換了的效果怎麼寫的：

#contentleft ul li:hover{
    background-image:url(image/liicon.png);
    background-repeat:no-repeat;
    background-position:38px 12px;}

#contentleft ul li.lastchild:hover{
background:none;
}

//由於沒有將圖片放在a標籤裡，所以要分開控制其顏色，這其實是不太合理的。。。

#contentleft ul li a:hover{
    color: #2C8AC9;    
}

  主要是對圖片的處理，剛剛想了下，為什麼不把圖片放在a的背景圖中，這樣可以更好地控制效果，照理來說，應該放在一起的，不過剛剛反覆折騰，沒做到，暫時還是以這種方法算了。

  由於關於綠化這一欄跟其它的不一樣，所以我用了個div,這種處理方式其實不太好，正常情況下，應該是跟最後一個li的處理方式一樣的，這裡再折騰下試試。

  試了下，結果還是重新分出個div好點，有很多地方不一樣，不太好控制。

 看看內容的右邊，這塊比較好控制，沒什麼痛點。

最後看下底部的控制：

一根橫線，一個底部導航條。

橫線是這樣設計的：

#line {
    background-color: #B2D00F;
    border: 1px solid #B2D00F;
    height: 3px;
    margin-top: 8px;}

底部導航條就是幾個a標籤然後讓他們置中text-align: center;就OK了。

OK,頁面完成：

對了，注意有個背景圖摳出來了。PS摳圖，切圖會了點了。