創(chuàng)建CSS布局頁面(上機實訓任務)

1、上機任務：創(chuàng)建CSS布局頁面【任務環(huán)境】： 完成任務的機器需要安裝如下軟件： Windows xp操作系統， Dreamweaver 8.0， Ie 7.0瀏覽器/Firefox 瀏覽器【操作流程規(guī)范】：一、 創(chuàng)建站點，然后創(chuàng)建頁面index.html。在index.html頁面中編寫第一個div與css。xhtml結構：此處顯示 id header 的內容CSS代碼：#header color: #FFFFFF;background-color: #666666;height: 100px;width: 700px;overflow: hidden;#header h1 font-size:

2、 20px;margin-left: 20px;margin-top: 20px;display: block;圖：二、 通過Dreamweaver 8的可視化操作來完成二欄式布局。XHTML結構： CSS代碼：#layout width: 700px;#layout #left background-color: #8dad1f;float: left;width: 150px;#layout #right padding: 10px;float: left;width: 530px;圖：三、 設計列表XHTML結構： IE捉迷藏 UL的不同表現 IE 3px問題 高度不適應 IE斷頭臺問題

3、 CSS代碼：#layout #left #titlelist margin: 0px;padding: 0px;list-style-type: none;#layout #left #titlelist li color: #FFFFFF;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #a3c431;圖：四、 創(chuàng)建導航XHTML代碼： IE捉秘藏問題 首頁 CSS入門 CSS高級技

4、巧 CSS hack CSS代碼：#header #nav li float: left;list-style-type: none;#header #nav a display: block;background-color: #999999;color: #FFFFFF;padding: 5px;margin-left: 3px;text-decoration: none;#header #nav a:hover background-color: #787878;#header #nav #current color: #666666;background-color: #FFFFFF;#header #nav margin-left: 400px;margin-top: 36px;圖：五、 編寫與應用cssXHTML結構：捉迷藏問題(Peekaboo Bug)是IE瀏覽器中的一個非常典型的對CSS的支持上的bug，說他是bug毫不為過，捉迷藏問題主要出現在IE6瀏覽器，當div應用稍顯復雜的時候，常常出現的情況是在用于版式布局的時候，有時候當我們制作一個左右二欄的網頁，而每個欄中又有一些鏈接、div等，這個時候容易引發(fā)捉迷藏問題，如本例中的代碼：CSS代碼：.strongText color: #996