（接上一篇，本節教程文字較多，比較枯燥，如果前邊知識學習牢固，可以直接下載源代碼查看，哪個地方不明白，再回過頭來看哪一部分）
有了上邊的基礎，下面的任務就是要利用html和css制作完成一個完整的網頁了。先從頭部開始，第三小節時我們已經把整體框架給搭建好了，就像蓋房子一樣，整體結構已經出來了，下面就需要填磚分割空間了。先分析下頭部：分為兩部分，一個是logo靠左側顯示，一個是搜索靠右側顯示，那麼布局時插入兩個div，一個向左浮動，一個向右浮動的方式來完成。另外還有很多種實現方法，比如logo用h1標簽，搜索用span，或者把logo做為背景圖片也是可以的，不管采用哪種方法，要根據頁面的需求選用一種最合理的方法。如果要在logo加上鏈接的話，那麼就不能用背景圖片的方法了。
<div id="header">
<div id="logo">此處顯示 id "logo" 的內容</div>
<div id="search">此處顯示 id "search" 的內容</div>
</div>
先在header裡插入以上兩塊元素。然後分別插入相應的內容，在logo裡插入我們事先切割好的logo圖片，在search裡插入一個表單，一個文本框和一個按鈕，插入後如下：
<div id="header">
<div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索產品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查詢" />
</form>
</div>
</div>
接下來定義css吧，在ps裡測量，頭部的高度是71px，logo距頂部18px，搜索產品距頂部30px，下面在css裡把這些參數都給定義上，看顯示的效果和效果圖中的效果是不是一樣呢？
#logo { float:left; margin-top:18px;}
#search { float:right; margin-top:30px;}
這兩項的位置已經差不多了。預覽你會發現，搜索框和按鈕跟效果圖中的不一樣，這是因為我們還沒對它設置樣式，接下來把文本框增加一個class為inp_srh樣式，按鈕增加btn_srh的樣式，然後定義這兩個樣式的屬性。
#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
.btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
#search * { vertical-align:middle;}
我們給search增加了高度和文字顏色，這點不用多解釋，但高度為什麼是24px，是為了照顧 IE6，大家去掉測試下就知道了；
inp_srh的寬度和高度並不是實際效果圖中的寬高，是因為默認情況下文本框帶有內邊距造成的。另外就是padding的值也會算到總寬度上的；
btn_srh就是應用背景圖像來實現的，說明一點這裡的border的值為none指的是無邊框，cursor定義鼠標樣式為手形，之前許多朋友用hand，但這個通不過w3c認證。text-indent:-999em這個屬性許多朋友可能不理解是干什麼用的了，它的作用相當於word中的首行縮進，這裡設置成-999，意思是向左側縮進-999em，這樣是不是就看不到文字啦，所以它的作用是將按鈕上的文字隱藏，當然也可以在html代碼中插入空格代替文字，但這樣做有點不太好，在不支持css的設備上查看時，用戶不知道這個按鈕是干什麼的了。所以建議采用這種形式；
有必要解釋下最後一行，它的特殊之處在樣式名和大括號之間加了一個*號，這裡兼容所用的，屬於css hack部分內容，是定義這些元素都垂直居中對齊。css hack本身就是無意思的東西，所以不做過多解釋，知道當需要垂直居中對齊時就采用這種寫法就行了，但是一定不要濫用，這個屬性也是有缺陷的，當有英文和中文同時出現時，英文會靠上顯示的。有關css hack更多的內容，請參考http://www.aa25.cn/special/css_hack/index.shtml
這些設置完後，把最初搭建框架時設置的header的背景色和底部外邊距給去掉吧。
#header { height:71px;}
至此，頭部的樣式就完成了，下邊該制作導航了。分析一下，導航分為一級導航和二級導航，所以我需要在nav下再插入nav_main和nav_son兩個塊元素。
<div id="nav">
<div id="nav_l"></div>
<div id="nav_r"></div>
<div class="nav_main">
<ul>
<li><a href="#"><span>首頁</span></a></li>
<li><a href="#" id="nav_current"><span>企業新聞</span></a></li>
<li><a href="#"><span>企業簡介</span></a></li>
<li><a href="#"><span>產品展廳</span></a></li>
<li><a href="#"><span>企業歷史</span></a></li>
<li><a href="#"><span>招商加盟</span></a></li>
<li><a href="#"><span>網上下單</span></a></li>
<li><a href="#"><span>聯系我們</span></a></li>
</ul>
</div>
<div class="nav_son">
<ul>
<li><a href="#">企業動態</a></li>
<li><a href="#">領導活動</a></li>
<li><a href="#">產品資訊</a></li>
<li><a href="#">通知公告</a></li>
</ul>
</div>
</div>
先設置nav的高度及背景圖片樣式。
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}
完了之後該一級菜單和二級菜單的樣式了
.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}
.nav_son { height:30px;}
.nav_son ul li { float:left; margin-top:4px;}
.nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}
.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}
這些樣式的作用就不多講了，以前的課程當中已詳細講解過了，只不過本例使用了雙導航菜單而已。現在在浏覽器下預覽一下吧，看看效果怎麼樣，是不是和效果圖差不多了，但還有最後一步就是兩端的圓角沒實現，實現圓角的方法也不復雜，只需再增加兩行代碼和兩個樣式即可。在nav下nav_main之前增加如下兩行代碼：
<div id="nav_l"></div>
<div id="nav_r"></div>
然後用樣式表定義一個左側的圓角，一個右側的圓角。css樣式如下：
#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}
#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}
預覽一下吧，看看頭部和導航是不是和效果圖中的一樣呢