創(chuàng)建CSS布局頁(yè)面(上機(jī)實(shí)訓(xùn)任務(wù))

1、上機(jī)任務(wù)：創(chuàng)建CSS布局頁(yè)面【任務(wù)環(huán)境】： 完成任務(wù)的機(jī)器需要安裝如下軟件： Windows xp操作系統(tǒng)， Dreamweaver 8.0， Ie 7.0瀏覽器/Firefox 瀏覽器【操作流程規(guī)范】：一、 創(chuàng)建站點(diǎn)，然后創(chuàng)建頁(yè)面index.html。在index.html頁(yè)面中編寫(xiě)第一個(gè)div與css。xhtml結(jié)構(gòu)：此處顯示 id header 的內(nèi)容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;圖：二、 通過(guò)Dreamweaver 8的可視化操作來(lái)完成二欄式布局。XHTML結(jié)構(gòu)： CSS代碼：#layout width: 700px;#layout #left background-color: #8dad1f;float: left;width: 150px;#layout #right padding: 10px;float: left;width: 530px;圖：三、 設(shè)計(jì)列表XHTML結(jié)構(gòu)： IE捉迷藏 UL的不同表現(xiàn) IE 3px問(wèn)題 高度不適應(yīng) IE斷頭臺(tái)問(wèn)題

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)建導(dǎo)航XHTML代碼： IE捉秘藏問(wèn)題 首頁(yè) CSS入門(mén) CSS高級(jí)技

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;圖：五、 編寫(xiě)與應(yīng)用cssXHTML結(jié)構(gòu)：捉迷藏問(wèn)題(Peekaboo Bug)是IE瀏覽器中的一個(gè)非常典型的對(duì)CSS的支持上的bug，說(shuō)他是bug毫不為過(guò)，捉迷藏問(wèn)題主要出現(xiàn)在IE6瀏覽器，當(dāng)div應(yīng)用稍顯復(fù)雜的時(shí)候，常常出現(xiàn)的情況是在用于版式布局的時(shí)候，有時(shí)候當(dāng)我們制作一個(gè)左右二欄的網(wǎng)頁(yè)，而每個(gè)欄中又有一些鏈接、div等，這個(gè)時(shí)候容易引發(fā)捉迷藏問(wèn)題，如本例中的代碼：CSS代碼：.strongText color: #996