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

1、上機(jī)任務(wù)：創(chuàng)建CSS布局頁(yè)面【任務(wù)環(huán)境1:完成任務(wù)的機(jī)器需要安裝如下軟件：Windows xp操作系統(tǒng)，Dreamweaver 8.0 , Ie 7.0 瀏覽器/Firefox 瀏覽器【操作流程規(guī)范1:一、創(chuàng)建站點(diǎn)，然后創(chuàng)建頁(yè)面 index.html 。在index.html頁(yè)面中編寫(xiě)第一個(gè)div與css。xhtml結(jié)構(gòu)：<div id="header”> 此處顯示 id "header" 的內(nèi)容 </div>CSSHi碼：#headercolor: #FFFFFF;background-color: #666666;height: 100

2、px;width: 700px;overflow: hidden;#header h1 font-size: 20px;margin-left: 20px;margin-top: 20px;display: block;1 / ii下載文檔可編輯王 疑入寧軍二7 / ii下載文檔可編輯二、通過(guò)Dreamweaver 8的可視化操作來(lái)完成二欄式布局XHTM結(jié)構(gòu)：<div id="layout"><div id="left"></div><div id="right"></div>

3、;</div>CSSHi碼：#layout width: 700px;#layout #left background-color: #8dad1f;float: left;width: 150px;#layout #right padding: 10px;float: left;width: 530px;圖:三、設(shè)計(jì)列表XHTM結(jié)構(gòu)：<div id="layout"><div id="left"><ul id="titlelist"><li>IE 捉迷藏 </li&g

4、t;< li> UL 的不同表現(xiàn)</li>< li> IE 3Px 問(wèn)題 </li>< li>高度不適應(yīng)</li>< li> IE斷頭臺(tái)問(wèn)題</li></ul></div><div id="right"> CSSHi碼：#layout #left #titlelist margin: 0px;!padding: 0px;I list-style-type: none;iIi#layout #left #titlelist li color: #

5、FFFFFF;ipadding-top: 5px;iii padding-bottom: 5px;II padding-left: 10px;iborder-bottom-width: 1px;border-bottom-style: solid;iborder-bottom-color: #a3c431;i L圖：四、創(chuàng)建導(dǎo)航XHTM代碼：<div id="header"><h1>IE捉秘藏問(wèn)題</h1><ul id="nav"><li><a href="#">

6、 首頁(yè) </a></li><li><a href="#">CSS 入門(mén) </a></li><li><a href="#" id="current”>CSS高級(jí)技巧 </a></li><li><a href="#">CSS hack</a></li></ul></div><div id="layout">&

7、lt;div id="left">CSSHi碼：#header #nav li float: left;!list-style-type: none;IiI#header #nav a idisplay: block;background-color: #999999;icolor: #FFFFFF;iiipadding: 5px;I Imargin-left: 3px;itext-decoration: none;i#header #nav a:hoveri background-color: #787878;i#header #nav #current color

8、: #666666;ibackground-color: #FFFFFF;#header #nav margin-left: 400px;margin-top: 36px;圖：五、編寫(xiě)與應(yīng)用cssXHTML吉構(gòu)：<div id="right"><p> 捉迷藏 問(wèn)題(<span class="strongText">Peekaboo Bug</span>)是丘瀏覽器中的一個(gè)非常典型的對(duì)CSS勺支持上的bug, 說(shuō)他是bug毫不為過(guò)，捉迷藏問(wèn)題主要出現(xiàn)在IE6瀏覽器，當(dāng)div應(yīng) 用稍顯復(fù)雜的時(shí)候，常常出現(xiàn)的情況

9、是在用于版式布局的時(shí)候，有時(shí)候當(dāng)我們制作一個(gè)左右二欄的網(wǎng)頁(yè)，而每個(gè)欄中又有一些鏈接、div8 / 11下載文檔可編輯等，這個(gè)時(shí)候容易引發(fā)捉迷藏問(wèn)題，如本例中的代碼：</p>CSSHi碼:.strongText color: #996600;background-color: #FFFF99;font-weight: bold;L 圖：IE捉秘藏問(wèn)題工F盤(pán)讓藏叫的不同表現(xiàn) n而問(wèn)踐 忘度不適應(yīng) "斷頭言問(wèn)題吉靈 cssAn 盟電司 css i.：k捉吐掂可至 、' I是，界攬囂1+由-TJ常哄型叼燈二曲匕4上抬ucE處是血部不為過(guò)，捉迸藏問(wèn)題主要出機(jī)直邛F制量等.當(dāng)

10、引卡應(yīng)用鞋顯復(fù)手的時(shí)崔，常常出現(xiàn)機(jī)況是在用于拒式 布局的時(shí)候.有時(shí)候?yàn)閮撞繧作一個(gè)左右二欄的網(wǎng)頁(yè)，而每個(gè)欄中又有一些飩掖、11Y號(hào)，3個(gè)昨候 容易引發(fā)成進(jìn)意問(wèn)題兀本例口的代碼：:wav 1三青中皿土畤；<dl±v ieft* >«L eft</ Jl v>Wdhv id= "right'Mri ght Q div J:品甘 1 d- * dl ft ar rt yh i&t t o« Cf J-t:，*i,)群彈斷ifiiii島落代碼堂試避二不匕欄式布局7其占短旗為主面,新冰為若以 電膏就iG支 字的為底部，我/時(shí)江在這拜1小箍陶中加加一些虛假向的：Xdxv id-lacMiCKdi"*hft Q 仁，#"；施播AOG </div>kdhv杵核國(guó)聯(lián)文奪#r)如hr正* 海提必一 <Sr />kbr f>工業(yè)¥讖1且11中的 ctv t a Jkr"="*"JC</Cq(lLV>*r：eM中曲克K G hr*依f海接(!”&&