表單中作業(yè)的問題網(wǎng)頁設(shè)計與制作

1、表單中作業(yè)的問題表單中作業(yè)的問題p 理解表單的三要素理解表單的三要素p 表單域表單域form p 輸入域輸入域input等等 p 提交按鈕提交按鈕p 只有具有了這三部分，表單才能將用戶輸只有具有了這三部分，表單才能將用戶輸入的信息提交給服務(wù)器，否則只是擺看的入的信息提交給服務(wù)器，否則只是擺看的name/value信息對信息對p 表單向服務(wù)器提交的內(nèi)容總是表單向服務(wù)器提交的內(nèi)容總是name/value信息信息對，對于文本輸入類的框來說，一般無需定義對，對于文本輸入類的框來說，一般無需定義value屬性，屬性，value的值是你向文本框輸入的字符。的值是你向文本框輸入的字符。當(dāng)然也可以事先定義當(dāng)然

2、也可以事先定義value屬性，那么打開網(wǎng)頁屬性，那么打開網(wǎng)頁它就會顯示在文本框中。對于選擇框（單選框、它就會顯示在文本框中。對于選擇框（單選框、復(fù)選框和列表菜單）來說，復(fù)選框和列表菜單）來說，value的值是事先設(shè)的值是事先設(shè)定的，只有某個選項被選中后它的定的，只有某個選項被選中后它的value值才會值才會生效，為了讓用戶選中不同選項后傳遞給服務(wù)生效，為了讓用戶選中不同選項后傳遞給服務(wù)器的值也不同，因此在同一個選擇框集合中每器的值也不同，因此在同一個選擇框集合中每個選項的個選項的value值都要不同值都要不同 下面的表單代碼將向服務(wù)器提交什么內(nèi)容下面的表單代碼將向服務(wù)器提交什么內(nèi)容 用戶名：用

3、戶名： 密碼密碼 ： 性別：性別： 男男 女女 愛好：愛好： 跳舞跳舞 散步散步 唱歌唱歌 所在地：所在地： 長沙長沙 湘潭湘潭 衡陽衡陽 個性簽名：個性簽名： p 因此上例傳送的值是：因此上例傳送的值是：p user=tang pw=123 sex=1 fav2=2 fav3=3 addr=3 sign=wo submit=提交提交 相對定位和絕對定位的比較相對定位和絕對定位的比較 相對定位相對定位relative絕對定位絕對定位absolute定位定位基準(zhǔn)基準(zhǔn)以它自己以它自己原來的位原來的位置為基準(zhǔn)置為基準(zhǔn)以距離它最近的設(shè)置了定位屬性以距離它最近的設(shè)置了定位屬性的父級元素為定位基準(zhǔn)，若它所

4、的父級元素為定位基準(zhǔn)，若它所有的父元素都沒設(shè)置定位屬性，有的父元素都沒設(shè)置定位屬性，則以瀏覽器窗口為定位基準(zhǔn)則以瀏覽器窗口為定位基準(zhǔn)原來原來的位的位置置還占用著還占用著原來的位原來的位置，未脫置，未脫離標(biāo)準(zhǔn)流離標(biāo)準(zhǔn)流不占用其原來的位置，已經(jīng)脫離不占用其原來的位置，已經(jīng)脫離標(biāo)準(zhǔn)流，其它元素就當(dāng)它不存在標(biāo)準(zhǔn)流，其它元素就當(dāng)它不存在一樣一樣制作純制作純CSS的下拉菜單的下拉菜單p 由于下拉菜單在彈出時是浮在網(wǎng)頁上的，由于下拉菜單在彈出時是浮在網(wǎng)頁上的，所以放置下拉菜單的元素必須設(shè)置為所以放置下拉菜單的元素必須設(shè)置為絕對絕對定位元素定位元素，而且下拉菜單位置是依據(jù)它的，而且下拉菜單位置是依據(jù)它的導(dǎo)航項

5、來定位的，所以導(dǎo)航項應(yīng)該設(shè)置為導(dǎo)航項來定位的，所以導(dǎo)航項應(yīng)該設(shè)置為相對定位相對定位，作為下拉菜單的定位基準(zhǔn)，當(dāng)，作為下拉菜單的定位基準(zhǔn)，當(dāng)鼠標(biāo)滑到導(dǎo)航項時，顯示下拉菜單，當(dāng)鼠鼠標(biāo)滑到導(dǎo)航項時，顯示下拉菜單，當(dāng)鼠標(biāo)離開時，設(shè)置下拉菜單元素的標(biāo)離開時，設(shè)置下拉菜單元素的display屬屬性為性為none，則下拉菜單就被隱藏起來，則下拉菜單就被隱藏起來 第一步第一步 寫結(jié)構(gòu)代碼寫結(jié)構(gòu)代碼p 下拉菜單采用二級列表結(jié)構(gòu)，第下拉菜單采用二級列表結(jié)構(gòu)，第一級放導(dǎo)航項，第二級放下拉菜一級放導(dǎo)航項，第二級放下拉菜單項。首先寫出它的結(jié)構(gòu)代碼單項。首先寫出它的結(jié)構(gòu)代碼 文文 章章 Ajax教程教程 SAML教程教程

6、 RIA教程教程 Flex教程教程 第二步第二步 使導(dǎo)航項水平排列使導(dǎo)航項水平排列設(shè)置第一層設(shè)置第一層li為左浮動，這樣導(dǎo)航項就會水平排列，為左浮動，這樣導(dǎo)航項就會水平排列，同時去除列表的小黑點、填充和邊界同時去除列表的小黑點、填充和邊界 ，再設(shè)置導(dǎo)航，再設(shè)置導(dǎo)航項項li為相對定位，讓下拉菜單以它為基準(zhǔn)定位。為相對定位，讓下拉菜單以它為基準(zhǔn)定位。 ul#nav padding: 0;margin: 0;list-style: none;li float: left;width: 160px;position:relative; 第三步第三步 設(shè)置下拉菜單設(shè)置下拉菜單li ulp 設(shè)置下拉菜單為

7、絕對定位，往導(dǎo)航項下偏移設(shè)置下拉菜單為絕對定位，往導(dǎo)航項下偏移21像素。平時導(dǎo)航項未被訪問時應(yīng)隱藏下拉菜單像素。平時導(dǎo)航項未被訪問時應(yīng)隱藏下拉菜單ul，所以，所以ul默認(rèn)值是不顯示。默認(rèn)值是不顯示。li ul display: none;position: absolute;top: 21px;再添加交互，當(dāng)鼠標(biāo)滑過時顯示下拉菜單再添加交互，當(dāng)鼠標(biāo)滑過時顯示下拉菜單ul。li:hover ul display: block; 第四步第四步 用用CSS樣式美化下拉菜單樣式美化下拉菜單ul li adisplay:block;font-size:12px;border: 1px solid #cc

8、c;padding:3px;text-decoration: none;color: #777;ul li a:hoverbackground-color:#f4f4f4; 下拉菜單制作完成下拉菜單制作完成p 這樣，一個下拉菜單就做好了，由于這樣，一個下拉菜單就做好了，由于IE6不支持不支持li:hover偽類，所以在偽類，所以在IE6下不能看下不能看到彈出菜單。到彈出菜單。p 想一想：如果把上述選擇器中的想一想：如果把上述選擇器中的position:relative;和和position: absolute;都去都去掉還會有上面的下拉菜單效果嗎？會出現(xiàn)掉還會有上面的下拉菜單效果嗎？會出現(xiàn)什么

9、問題呢？什么問題呢？第五步第五步 兼容兼容IE6瀏覽器瀏覽器p IE6由于不支持由于不支持li:hover所以沒有下拉菜單，我們可所以沒有下拉菜單，我們可以把下拉菜單以把下拉菜單ul放在放在a標(biāo)記中，利用標(biāo)記中，利用a:hover ul來控來控制下拉菜單的顯示和隱藏。盡管把塊級元素制下拉菜單的顯示和隱藏。盡管把塊級元素ul放在放在a中在中在html語法中是錯誤的，但也能實現(xiàn)效果語法中是錯誤的，但也能實現(xiàn)效果 文文 章章 Ajax教程教程 SAML教程教程 RIA教程教程 Flex教程教程 添加的樣式代碼添加的樣式代碼p ul a:hover ulvisibility:visible;相對定位的

10、應(yīng)用制作圖片陰影相對定位的應(yīng)用制作圖片陰影制作圖片陰影制作圖片陰影p 不用一張圖片也能制作出和圖不用一張圖片也能制作出和圖1相同的簡相同的簡單陰影效果。它的原理是在單陰影效果。它的原理是在img元素外套元素外套一個外圍容器，將外圍容器的背景設(shè)置為一個外圍容器，將外圍容器的背景設(shè)置為灰色，作為灰色，作為img元素的陰影，同時不設(shè)置元素的陰影，同時不設(shè)置填充邊界等值使外圍容器和圖片一樣大，填充邊界等值使外圍容器和圖片一樣大，這樣圖像就正好把外圍容器的背景完全覆這樣圖像就正好把外圍容器的背景完全覆蓋，再設(shè)置圖像相對于原來的位置往左上蓋，再設(shè)置圖像相對于原來的位置往左上方偏移幾個像素，這樣圖像的右下方

11、就露方偏移幾個像素，這樣圖像的右下方就露出了陰影盒子右邊和下邊部分的背景，看出了陰影盒子右邊和下邊部分的背景，看起來就是起來就是img元素的陰影了元素的陰影了 圖片陰影代碼圖片陰影代碼img padding: 6px;border: 1px solid #465B68;background-color: #fff;position: relative;left: -5px;top: -5px; div.shadow background-color: #CCCCCC;float:left;圖片圖片絕對定位的應(yīng)用絕對定位的應(yīng)用制作圖片放大效果制作圖片放大效果圖片放大效果圖片放大效果p 首先，商品

12、的縮略圖的排列可以使用標(biāo)準(zhǔn)首先，商品的縮略圖的排列可以使用標(biāo)準(zhǔn)流方式排列，但商品的大圖要放在縮略圖流方式排列，但商品的大圖要放在縮略圖旁邊，所以得以縮略圖為定位基準(zhǔn)，因此旁邊，所以得以縮略圖為定位基準(zhǔn)，因此商品的縮略圖應(yīng)設(shè)置為相對定位。而商品商品的縮略圖應(yīng)設(shè)置為相對定位。而商品的大圖是浮動在網(wǎng)頁上，所以是絕對定位的大圖是浮動在網(wǎng)頁上，所以是絕對定位元素。在正常情況下，商品的大圖是不顯元素。在正常情況下，商品的大圖是不顯示的，當(dāng)鼠標(biāo)滑到縮略圖上時，就顯示商示的，當(dāng)鼠標(biāo)滑到縮略圖上時，就顯示商品的大圖。品的大圖。 第一步第一步 寫結(jié)構(gòu)代碼寫結(jié)構(gòu)代碼p 由于有許多張圖片，因此采用列表結(jié)構(gòu)存放這由于有

13、許多張圖片，因此采用列表結(jié)構(gòu)存放這些圖片，每個列表項放一張圖片。因為圖片要些圖片，每個列表項放一張圖片。因為圖片要響應(yīng)鼠標(biāo)滑過，所以外面要套一個響應(yīng)鼠標(biāo)滑過，所以外面要套一個a標(biāo)記標(biāo)記 第二步第二步 寫寫CSS代碼代碼#lib img border: 1px solid #333333;padding: 6px;margin: 4px;#lib a:hover border:1px solid #CCCCCC; /*此處主要為兼容此處主要為兼容IE 6*/#lib a:hover img width:300px; /*重新定義圖片的寬和高實現(xiàn)放大重新定義圖片的寬和高實現(xiàn)放大*/ height:

14、280px;第三步第三步 設(shè)置絕對定位和定位基準(zhǔn)設(shè)置絕對定位和定位基準(zhǔn)#lib a position:relative;#lib a:hover border:1px solid #CCCCCC;z-index:1000;/*防止放大后圖片被小圖覆蓋防止放大后圖片被小圖覆蓋*/#lib a:hover img position: absolute;left:-50px;top:-50px;width:300px;height:280px;z-index:1000;第四步第四步 給給a的父元素的父元素li設(shè)置寬和高設(shè)置寬和高給給li元素設(shè)置寬度和高度，這樣即算元素設(shè)置寬度和高度，這樣即算a元素絕

15、對定元素絕對定位不占據(jù)空間后，其父元素位不占據(jù)空間后，其父元素li由于定義了寬和高，由于定義了寬和高，就不會自動收縮，仍然會占據(jù)原來的位置。這就不會自動收縮，仍然會占據(jù)原來的位置。這樣后面的圖片就不會擠占放大后圖片的位置樣后面的圖片就不會擠占放大后圖片的位置 #lib li float: left;width:164px;height:154px; /*防止防止a元素絕對定位不占據(jù)空間元素絕對定位不占據(jù)空間后父元素自動收縮后父元素自動收縮*/margin: 4px;overflow屬性介紹屬性介紹overflow屬性屬性p overflow屬性的基本功能是設(shè)置元素盒子中的屬性的基本功能是設(shè)置元

16、素盒子中的內(nèi)容如果溢出是否顯示，取值有內(nèi)容如果溢出是否顯示，取值有visible（可（可見）、見）、hidden（隱藏）、（隱藏）、scroll（出現(xiàn)滾動條）。（出現(xiàn)滾動條）。如果不設(shè)置則默認(rèn)值為如果不設(shè)置則默認(rèn)值為visible。#qq border:1px solid #333333;height: 100px;width: 100px;overflow:scroll; 在一個遙遠(yuǎn)而古老的國度里，國王和在一個遙遠(yuǎn)而古老的國度里，國王和王后因為性格不和而離婚，國王再娶了一位美麗的王后因為性格不和而離婚，國王再娶了一位美麗的王后?？上?，這位新后天性善妒王后?？上?，這位新后天性善妒overflo

17、w四種取值效果四種取值效果overflow:visibleoverflow用來代替清除浮動的元素用來代替清除浮動的元素p overflow屬性的另一種作用是用來代替清屬性的另一種作用是用來代替清除浮動的元素。除浮動的元素。p 如果父元素中的子元素都設(shè)置成了浮動，如果父元素中的子元素都設(shè)置成了浮動，那么子元素脫離了標(biāo)準(zhǔn)流，導(dǎo)致父元素高那么子元素脫離了標(biāo)準(zhǔn)流，導(dǎo)致父元素高度不會自動伸展包含住子元素，前面說過度不會自動伸展包含住子元素，前面說過可以在這些浮動的子元素的后面添加一個可以在這些浮動的子元素的后面添加一個清除浮動的元素，來把包含盒子撐開。實清除浮動的元素，來把包含盒子撐開。實際上，通過對父

18、元素設(shè)置際上，通過對父元素設(shè)置overflow屬性可屬性可以代替清除浮動元素的作用。以代替清除浮動元素的作用。 浮動的瀏覽器顯示問題總結(jié)浮動的瀏覽器顯示問題總結(jié) 情況情況未浮動的盒子不未浮動的盒子不設(shè)寬或高設(shè)寬或高對未浮動的盒子設(shè)對未浮動的盒子設(shè)置寬或高置寬或高盒子浮動，其外層盒子浮動，其外層盒子未浮動盒子未浮動顯示效果一致顯示效果一致IE6浮動盒子將不會浮動盒子將不會脫離標(biāo)準(zhǔn)流，脫離標(biāo)準(zhǔn)流，F(xiàn)irefox浮動盒子仍浮動盒子仍然是脫離標(biāo)準(zhǔn)流的然是脫離標(biāo)準(zhǔn)流的盒子浮動，后面相盒子浮動，后面相鄰盒子未浮動鄰盒子未浮動讓讓IE 6與與Firefox都能清除浮動都能清除浮動p 在浮動的瀏覽器兼容一節(jié)說

19、過在浮動的瀏覽器兼容一節(jié)說過IE6中只要設(shè)置了中只要設(shè)置了未浮動的父元素未浮動的父元素box的寬或高，那么浮動元素不的寬或高，那么浮動元素不會脫離標(biāo)準(zhǔn)流。父元素會自動伸展包含住浮動會脫離標(biāo)準(zhǔn)流。父元素會自動伸展包含住浮動塊，因此不需要使用上面任何一種清除浮動的塊，因此不需要使用上面任何一種清除浮動的方法。方法。p 但當(dāng)沒有對父元素但當(dāng)沒有對父元素box設(shè)置寬或高時，在設(shè)置寬或高時，在IE6中中父元素也不會包含住浮動塊，而且對父元素也不會包含住浮動塊，而且對IE6即使設(shè)即使設(shè)置置box的的overflow屬性也不起作用。這時對屬性也不起作用。這時對IE6來說，只能對盒子設(shè)置寬或高，如果不方便設(shè)來

20、說，只能對盒子設(shè)置寬或高，如果不方便設(shè)置寬度，則可以針對置寬度，則可以針對box設(shè)置一個很小的百分比設(shè)置一個很小的百分比高度，如（高度，如（height:1%），使），使IE6中的中的box也能包也能包含住浮動塊，這樣就兼容了含住浮動塊，這樣就兼容了IE6和和Firefox瀏覽器瀏覽器 CSS+div布局布局 CSS布局的本質(zhì)布局的本質(zhì)p 對于對于CSS布局而言，本質(zhì)就是大大小小的布局而言，本質(zhì)就是大大小小的盒子在頁面上擺放，你不是設(shè)計師，而是盒子在頁面上擺放，你不是設(shè)計師，而是排字工人，你眼中看到的不是文字，不是排字工人，你眼中看到的不是文字，不是圖像，而是一堆盒子。圖像，而是一堆盒子。p

21、你要考慮的就是盒子與盒子之間的關(guān)系！你要考慮的就是盒子與盒子之間的關(guān)系！標(biāo)準(zhǔn)流？并列？上下？嵌套？間隔？背景？標(biāo)準(zhǔn)流？并列？上下？嵌套？間隔？背景？浮動？絕對？相對？定位基準(zhǔn)？等等浮動？絕對？相對？定位基準(zhǔn)？等等 分欄布局的種類分欄布局的種類 p 網(wǎng)頁的布局從總體上說可分為固定寬度布局和可網(wǎng)頁的布局從總體上說可分為固定寬度布局和可變寬度布局兩類，所謂固定寬度是指網(wǎng)頁的寬度變寬度布局兩類，所謂固定寬度是指網(wǎng)頁的寬度是固定的，如是固定的，如780像素，不會隨瀏覽器大小的改像素，不會隨瀏覽器大小的改變而改變；而可變寬度是指如果瀏覽器窗口大小變而改變；而可變寬度是指如果瀏覽器窗口大小發(fā)生變化，網(wǎng)頁的寬

22、度也會變化，如將網(wǎng)頁寬度發(fā)生變化，網(wǎng)頁的寬度也會變化，如將網(wǎng)頁寬度設(shè)置為設(shè)置為85%，表示它的寬度永遠(yuǎn)是瀏覽器寬度的，表示它的寬度永遠(yuǎn)是瀏覽器寬度的85%。p 固定寬度的好處是網(wǎng)頁不會隨瀏覽器大小的改變固定寬度的好處是網(wǎng)頁不會隨瀏覽器大小的改變而發(fā)生變形，窗口變小只是網(wǎng)頁的一部分被遮蓋而發(fā)生變形，窗口變小只是網(wǎng)頁的一部分被遮蓋住，所以固定寬度布局用得更廣泛，適合于初學(xué)住，所以固定寬度布局用得更廣泛，適合于初學(xué)者使用。而可變寬度布局的好處是能適應(yīng)各種用者使用。而可變寬度布局的好處是能適應(yīng)各種用戶的顯示器，不會因為用戶的顯示器過寬而使兩戶的顯示器，不會因為用戶的顯示器過寬而使兩邊出現(xiàn)很寬的空白區(qū)域

23、邊出現(xiàn)很寬的空白區(qū)域 1-2-1式布局具有的形式式布局具有的形式1-3-1”固寬和變寬適應(yīng)布局固寬和變寬適應(yīng)布局p “對于對于“1-3-1”布局，可以產(chǎn)生更多的不布局，可以產(chǎn)生更多的不同變化方式。同變化方式。三列都按比例適應(yīng)寬度三列都按比例適應(yīng)寬度一列固定，其他兩列按比例適應(yīng)寬度一列固定，其他兩列按比例適應(yīng)寬度兩列固定，其他一列適應(yīng)寬度。兩列固定，其他一列適應(yīng)寬度。1-3-1式布局具有的形式式布局具有的形式 固定寬度布局固定寬度布局 固定寬度網(wǎng)頁居中的方法固定寬度網(wǎng)頁居中的方法 text-align法：法：bodytext-align：center；mini-width：790px； #wra

24、ppermargin：0 auto；text-align：left；width：780px；margin法：法：#container margin: 0 auto ; width: 780px; #container margin: 0 auto ; width: 85%; 相對定位法：相對定位法：#container position: relative; width:780px; left: 50%; margin-left: -390px; 固定寬度分欄的實現(xiàn)固定寬度分欄的實現(xiàn)p 浮動法（三欄浮動）浮動法（三欄浮動）寫總體結(jié)構(gòu)代碼寫總體結(jié)構(gòu)代碼id=headerid=naviid=con

25、tentid=sideid=pagefooter再寫欄目結(jié)構(gòu)代碼再寫欄目結(jié)構(gòu)代碼由于欄目框可以重用，所以一般將它們添加類名由于欄目框可以重用，所以一般將它們添加類名.rounded background: url(images/left-top.gif) top left no-repeat; width:100%; .rounded h2 background: url(images/right-top.gif) top right no-repeat; padding:20px 20px 10px; margin:0; 可變寬度布局可變寬度布局 兩列等比例布局兩列等比例布局 p 將每列的寬

26、由固定的值改為百分比就行了將每列的寬由固定的值改為百分比就行了 兩列等比例布局兩列等比例布局#header,#pagefooter,#containermargin:0 auto; width：760px; /*刪除原來的固定寬度刪除原來的固定寬度*/width:85%; /*改為比例寬度改為比例寬度*/ #contentfloat:right;width：500px; /*刪除原來的固定寬度刪除原來的固定寬度*/width:66%; /*改為比例寬度改為比例寬度*/#sidefloat:left;width：260px; /*刪除原來的固定寬度刪除原來的固定寬度*/width:33%; /*

27、改為比例寬度改為比例寬度*/1-2-1單列變寬布局單列變寬布局改進(jìn)浮動法改進(jìn)浮動法#header,#pagefooter,#containermargin:0 auto;width:85%; #contentWrapmargin-right:-300px;float:left;width:100%; #contentmargin-right:300px; #sidefloat:right;width:300px; #pagefooterclear:both;1-3-1液態(tài)布局（中間列可變）液態(tài)布局（中間列可變）#navi width: 200px;position: absolute;left

28、: 0px;top: 0px;#content right: 0px;top: 0px;margin-right: 200px;margin-left: 200px;#side width: 200px;position: absolute;right: 0px;top: 0px;1-3-1液態(tài)布局（中間列可變）液態(tài)布局（中間列可變）p 兩側(cè)列固定、中間列變寬的兩側(cè)列固定、中間列變寬的1-3-1式布局也是一種式布局也是一種常用的布局形式，這種形式的布局通常是把兩側(cè)常用的布局形式，這種形式的布局通常是把兩側(cè)列設(shè)置成絕對定位元素，并對它們設(shè)置固定寬度。列設(shè)置成絕對定位元素，并對它們設(shè)置固定寬度。例

29、如左右兩列都設(shè)置成例如左右兩列都設(shè)置成200像素寬，而中間列不設(shè)像素寬，而中間列不設(shè)置寬度，這樣它就會隨著網(wǎng)頁的大小改變而改變。置寬度，這樣它就會隨著網(wǎng)頁的大小改變而改變。然后將然后將container設(shè)置為相對定位，讓兩側(cè)列以它設(shè)置為相對定位，讓兩側(cè)列以它為定位基準(zhǔn)。如果此時對兩側(cè)列的盒子設(shè)置背景為定位基準(zhǔn)。如果此時對兩側(cè)列的盒子設(shè)置背景色，那么兩側(cè)列就可能和中間列不等高，色，那么兩側(cè)列就可能和中間列不等高，p 因此不能對兩側(cè)列的盒子設(shè)置背景色，而應(yīng)該對因此不能對兩側(cè)列的盒子設(shè)置背景色，而應(yīng)該對container設(shè)置背景顏色，這樣兩側(cè)列看起來就和設(shè)置背景顏色，這樣兩側(cè)列看起來就和中間列等高了

30、中間列等高了 如果對兩側(cè)列設(shè)置背景色如果對兩側(cè)列設(shè)置背景色解決解決CSS瀏覽器兼容問題的基本方法瀏覽器兼容問題的基本方法 使用兼容屬性使用兼容屬性p 由于由于CSS樣式以及頁面各種元素在不同瀏覽器樣式以及頁面各種元素在不同瀏覽器中的表現(xiàn)不同，所以必須考慮網(wǎng)頁代碼的瀏覽中的表現(xiàn)不同，所以必須考慮網(wǎng)頁代碼的瀏覽器兼容問題。解決兼容性問題一般可以遵循以器兼容問題。解決兼容性問題一般可以遵循以下兩個原則。下兩個原則。p 1盡量使用兼容屬性盡量使用兼容屬性p 因為并不是所有的因為并不是所有的CSS屬性都存在兼容的問題，屬性都存在兼容的問題，所以如果使用所有瀏覽器都能理解一致的屬性，所以如果使用所有瀏覽器

31、都能理解一致的屬性，那么兼容的問題也就不存在了。那么兼容的問題也就不存在了。p 但是如果要實現(xiàn)這樣的兼容就會有一部分但是如果要實現(xiàn)這樣的兼容就會有一部分CSS屬性的使用受到限制。也就是說兼容的瀏覽器屬性的使用受到限制。也就是說兼容的瀏覽器越多，能夠使用的越多，能夠使用的CSS屬性就越少。這給網(wǎng)頁屬性就越少。這給網(wǎng)頁設(shè)計中靈活運用設(shè)計中靈活運用CSS屬性帶來困難。屬性帶來困難。使用使用CSS hack技術(shù)技術(shù) p CSS hack技術(shù)是通過被某些瀏覽器支持技術(shù)是通過被某些瀏覽器支持而其他瀏覽器不支持的語句，使一個而其他瀏覽器不支持的語句，使一個CSS樣式能夠按開發(fā)者的目的被特定瀏覽器解樣式能夠按

32、開發(fā)者的目的被特定瀏覽器解釋或者不能被特定瀏覽器解釋。釋或者不能被特定瀏覽器解釋。 1) 使用使用!important關(guān)鍵字關(guān)鍵字p 前面已經(jīng)介紹過前面已經(jīng)介紹過!important關(guān)鍵字的用途，如果關(guān)鍵字的用途，如果在同一個選擇器在同一個選擇器中定義了兩條相沖突的規(guī)則中定義了兩條相沖突的規(guī)則（注意是在同一個選擇器中），那么（注意是在同一個選擇器中），那么IE6總是以總是以后一條為準(zhǔn)，不認(rèn)后一條為準(zhǔn)，不認(rèn)!important ，而，而Firefox/IE7以以定義了定義了!important的為準(zhǔn)。例如：的為準(zhǔn)。例如：.shadow div background: url(images/top

33、-left.png) no-repeat !important; /*Firefox、IE 7執(zhí)行這一條執(zhí)行這一條*/ background: url(images/top-left.gif) no-repeat; /*IE6執(zhí)行這一條執(zhí)行這一條*/ padding: 0 6px 6px 0; 2) 在屬性前添加在屬性前添加“+”、“_”號號在屬性前添加在屬性前添加“+”號可區(qū)別號可區(qū)別IE與其他瀏覽器，例如：與其他瀏覽器，例如：#demo div width:50px; /* FireFox 有效有效 */ +width:60px; /* IE 有效有效 */那么如何進(jìn)一步區(qū)分那么如何進(jìn)一步

34、區(qū)分IE 6和和IE 7呢？由于呢？由于IE 7不支持屬性前加不支持屬性前加下劃線下劃線“_ _”的寫法，會將整條樣式忽略，而的寫法，會將整條樣式忽略，而IE 6卻不會忽卻不會忽略，和沒加下劃線的屬性同樣解釋。例如：略，和沒加下劃線的屬性同樣解釋。例如：#demo div _ _height:50px; /* FireFox 有效有效 */ +height:60px; /* IE 7 有效有效 */ _height:70px; /* IE 6 有效有效 */3) 使用子選擇器和屬性選擇器等使用子選擇器和屬性選擇器等IE 6不不支持的選擇器支持的選擇器p 例如：例如：p html body background-image:(bg.gif) /* IE 6 有效有效 */p htmlbody background-image:(bg.png) /* FireFox/IE 7有效有效 */4)使用使用IE條件注釋條件注釋 p 條件注釋是條件注釋是IE特有的功能，能夠使特有的功能，能夠使IE瀏覽器對瀏覽器對XHTML代碼進(jìn)行單獨處