頁面頂部製做

當咱們寫好了頁面大體的DIV結構後，咱們就能夠開始細緻地對每個部分進行製做了。
在上一章中咱們寫入了一些樣式，那些樣式是爲了預覽結構而寫入的，咱們把css.css中的樣式所有清除掉，從新寫入如下樣式代碼：
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*頁面層容器*/
#container {width:800px;margin:10px auto}
樣式說明：
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}
這兩項分別是控制頁面中超連接的樣式，具體我就不說明了，請你們參閱手冊。
#container {width:800px;margin:10px auto}
指定整個頁面的顯示區域。
width:800px指定寬度爲800像素，這裏根據實際所需設定。
margin:10px auto，則是頁面上、下邊距爲10個像素，而且居中顯示。
上一章中咱們講過， 對層的margin屬性的左右邊距設置爲auto可讓層居中顯示。
接下來，咱們開始製做TOP部分，TOP部分包括了 LOGO、菜單和Banner，首先咱們要作的就是對設計好的圖片進行切片

我將TOP部分切片爲兩部分，第一部分包括了LOGO和一條橫線。因爲LOGO圖片並無太多的顏色，這裏我因而將這一部分保存爲GIF格式，調色板選擇 爲精確，選擇Alpha透明度，色版爲白色(此處顏色應與背景色相同)，導出爲logo.gif，圖像寬度爲800px。
到這裏，有的朋友就說了 ，* 爲何要使用GIF格式？使用JPEG不是更好嗎？
由於GIF格式的圖片文件更小，這樣能使頁面載入的速度更快，固然使用此格式以前必須肯定圖片並無使用太多的顏色，當咱們使用了GIF格式時，從肉眼上並不能看出圖片有什麼太大的變化，所以這是可行的。
* 接下來的Banner部分還能使用GIF格式嗎？
答案是不能，由於Banner部分是一個細緻的圖片，若是使用GIF格式顏色會有太大的損失，因此必須使用JPEG格式，將文件導出爲banner.jpg。
* 合理的切片是很是之重要的，由於切片的方法正確與否決定了CSS書寫的簡易程度以及頁面載入速度。
切好片後，咱們還須要對TOP部分進行分析並將DIV結構寫入Header中代碼以下：
　　
　　　

1. <div id="menu">
   
2. 　　　<ul>
   
3. 　　　　<li><a href="#">首頁</a></li>
   
4. 　　　　<li class="menuDiv"></li>
   
5. 　　　　<li><a href="#">博客</a></li>
   
6. 　　　　<li class="menuDiv"></li>
   
7. 　　　　<li><a href="#">設計</a></li>
   
8. 　　　　<li class="menuDiv"></li>
   
9. 　　　　<li><a href="#">相冊</a></li>
   
10. 　　　　<li class="menuDiv"></li>
    
11. 　　　　<li><a href="#">論壇</a></li>
    
12. 　　　　<li class="menuDiv"></li>
    
13. 　　　　<li><a href="#">關於</a></li>
    
14. 　　　</ul>
    
15. 　　</div>
    
16. 　　<div id="banner">
    
17. 　　</div>

複製代碼

　　　
　　
　　
　　
爲何要這麼寫呢，由於對菜單使用列表形式，能夠在之後方便對菜單定製樣式。
而爲何要添加如下代碼呢？
插入這一段代碼是能夠方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。
而後咱們在css.css中再寫入如下樣式：
/*頁面頭部*/
#header {background:url(logo.gif) no-repeat}
樣式說明：
#header {background:url(logo.gif) no-repeat}
給頁面頭部分加入一個背景圖片LOGO，而且不做填充。
這裏，咱們沒有指定header層的高度，爲何不指定呢？
由於header層中還有菜單和banner項，因此層的高度暫時是未知的，而層的屬性又可讓層根據內容自動設定調整，所以咱們並不須要指定高度。
使用列表製做菜單
開始此節的學習前，請確認你已經參照以前的幾節內容寫入了DIV、CSS到index.htm和css.css文件中。
這一節我將告訴你們如何用列表來製做菜單。

1. <div id="menu">
   
2.     <ul>
   
3.       <li><a href="#">首頁</a></li>
   
4.    <li class="menuDiv"></li>
   
5.    <li><a href="#">博客</a></li>
   
6.    <li class="menuDiv"></li>
   
7.    <li><a href="#">設計</a></li>
   
8.    <li class="menuDiv"></li>
   
9.    <li><a href="#">相冊</a></li>
   
10.    <li class="menuDiv"></li>
    
11.    <li><a href="#">論壇</a></li>
    
12.    <li class="menuDiv"></li>
    
13.    <li><a href="#">關於</a></li>
    
14.     </ul>
    
15.   </div>

複製代碼

以上是這部分的結構，有關於 、這兩個HTML元素你們本身去參考相關的內容吧，它們最主要的做用就是在HTML中以列表的形式來顯示一些信息。
還有一點須要你們必定要分清楚的，當在HTML中定義爲id="divID"時，在CSS對應的設置語法則是#divID{} ，若是在HTML中定義爲class="divID"時，則在CSS中對應的設置語法是.divID。
若是id="divID"這個層中包括了一個，則這個img在CSS中對應的設置語法應該是#divID img {}，一樣，若是是包含在class="divID"這個層中時，則設置語法應該是.divID img {}，這一點但願你們要分清楚了。
另外，HTML中的一切元素都是能夠定義的，例如table、tr、td、th、form、img、input...等等，若是你要在CSS中設置它們，則直接寫入元素的名稱加上一對大括號{}就能夠了。全部的CSS代碼都應該寫在大括號{}中。
按照上面的介紹，咱們先在css.css中寫入如下代碼：
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}
解釋一下：
#menu ul {list-style:none;margin:0px;}
list-style:none，這一句是取消列表前點，由於咱們不須要這些點。
margin:0px，這一句是刪除UL的縮進，這樣作可使全部的列表內容都不縮進。
#menu ul li {float:left;}
這裏的 float:left 的左右是讓內容都在同一行顯示，所以使用了浮動屬性(float)。
到這一步，建議你們先保存預覽一下效果，咱們再添加下面的內容，
如今，雛形已經出來了，咱們再來固定菜單的位置，把代碼改爲以下：
#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0來固定菜單位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜單位於頁面右側*/
#menu ul li {float:left;margin:0 10px}
這時，位置已經肯定了，但是構思圖中，菜單選項之間還有一條豎線，怎麼辦呢？
別忘了，咱們早就已經留好了一個空的，要想加入豎線就使用它了。
按照上面說的方法，咱們再添加如下代碼：
.menuDiv {width:1px;height:28px;background:#999}
保存預覽一下，豎線是否已經出來了？關於這段代碼就很少講了，應該是很容易理解的。
不過，菜單選項的文字卻在頂部，咱們再修改爲如下代碼：
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
關於display:block;line-height:28px你們能夠去參閱一下手冊，我就很少講了。 效果基本上已經實現了，剩下的就是修改菜單的超連接樣式，在css.css中添加如下代碼： #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} 這個也很少說了，沒什麼好說的了