展開(kāi)全部 首先我們需要清楚，瀏覽器是如何讀取選擇器，以識(shí)別樣式，并將相應(yīng)的樣式附于對(duì)應(yīng)的HTML元素，達(dá)到美化頁(yè)面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中說(shuō)過(guò)“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說(shuō)，瀏覽器讀取選擇器的順序是由右到左進(jìn)行”。比如說(shuō)： div.nav ul li a 上面的實(shí)例來(lái)說(shuō)，瀏覽器首先會(huì)嘗試在你的HTML標(biāo)簽中尋找“a”元素，接著在匹配“l(fā)i和ul”，最后在去匹配“div.nav”。這就是前成所主的“選擇器從右到左的原則”。 選擇器的最后一部分，也就是選擇器的最右邊（在這個(gè)例子中就是a[title]部分）部分被稱為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。 老版本的瀏覽器可以過(guò)濾掉不匹配的選擇器，而直接匹配更高效的選擇器。記得David Hyatt在《Writing efficient CSS for use in the Mozilla UI》說(shuō)過(guò)：“這個(gè)關(guān)鍵選擇器可以大大提高選擇器的性能，少檢查一個(gè)給定的元素規(guī)則，就可以更有效的將樣式匹配給對(duì)應(yīng)的HTML元素。”那么如何讓關(guān)鍵選擇器更有效，性能化更高呢？其實(shí)很簡(jiǎn)單，主要把握一點(diǎn)“越具體的關(guān)鍵選擇器，其性能越高” 那么什么樣類型的選擇器，其性能高？什么樣的類型的選擇器性能低呢？下面我們就針對(duì)兩個(gè)問(wèn)題來(lái)展開(kāi)具體的學(xué)習(xí)。 CSS選擇器的效率 如果你閱讀了本站的有關(guān)于選擇器類型的介紹的話，你對(duì)選擇器并不會(huì)感到陌生。就算你沒(méi)讀過(guò)，我想CSS選擇器不會(huì)讓我們覺(jué)得是新東西，比如我們常用的基本選擇器“元素標(biāo)簽選擇器div”、“id選擇器#header”、“類選擇器.class”，或者說(shuō)我們很少見(jiàn)的偽類選擇器“:focus”以及更復(fù)雜的css3選擇器“:nth-child”等等。 選擇器有一個(gè)固有的效率，我們來(lái)看Steve Souders給排的一個(gè)順序： id選擇器（#myid）類選擇器（.myclassname）標(biāo)簽選擇器（div,h1,p）相鄰選擇器（h1+p）子選擇器（ul li）后代選擇器（li a）通配符選擇器（*）屬性選擇器（a[rel="external"]）偽類選擇器（a:hover,li:nth-child） 上面九種選擇器的效率是從高到低排下來(lái)的，基中ID選擇器的效率是最高，而偽類選擇器的效率則是最底。詳細(xì)的介紹大家還可以點(diǎn)擊Writing efficient CSS selectors。 綜合上面的順序，我們清楚的知道，id和類名用于關(guān)鍵選擇器上效率是最高的，而CSS3的仿偽類和屬性選擇器，雖然使用方便，但其效率卻是最低的。我們下面一起來(lái)看幾個(gè)實(shí)例的對(duì)比： div #myid 效率要比下面的高： #myid div 第一種選擇器比第二種選擇器效率高，大家或許會(huì)問(wèn)為什么？其實(shí)根據(jù)前面所介紹的我們就不難理解了，因?yàn)榈谝粋€(gè)選擇器的“關(guān)鍵選擇器”使用了 “ID選擇器”，而第二個(gè)選擇器的“關(guān)鍵選擇器”使用的是“標(biāo)簽選擇器”，對(duì)比下來(lái)，“ID選擇器”效率高過(guò)“標(biāo)簽選擇器”，所以說(shuō)第一個(gè)選擇器的效率要高于第二個(gè)選擇器。 在類名或ID名前面加上標(biāo)簽也會(huì)致使選擇器效率變低的，比如說(shuō)： div #myid 上面兩個(gè)選擇的效率要高于下面的選擇器： p#mydiv p.myclassname 來(lái)自Mozilla的幾點(diǎn)建議 David在《Use efficient CSS selectors》中介紹了幾種書寫高效率的CSS選擇器的方法，下面我將他們移到這里來(lái)讓大家參考： 寫道 1 避免普遍規(guī)則 2 不要在ID選擇器前加標(biāo)簽名或類名 3 不要在類名選擇器前加標(biāo)簽名 4 盡可能使用具體的類別 5 避免使用后代選擇器 6 標(biāo)簽分類規(guī)則中不應(yīng)該包含一個(gè)子選擇器 7 子選擇器的問(wèn)題 8 借助相關(guān)繼承關(guān)系 9 使用范圍內(nèi)的樣式表 如果你不夠清楚上面所講的是什么，你可以點(diǎn)擊這里，他會(huì)讓你更容易了解這些規(guī)則。 我們應(yīng)該怎么做 前面說(shuō)“ID選擇器”的效率是最高的，那么今天我們寫樣式，為了提高選擇器的效率，是不是我們要在每一個(gè)文檔的HTML元素中都加入ID名呢？我想這樣的做法是沒(méi)有的。對(duì)于一個(gè)有語(yǔ)義的代碼編寫和如何提高性能，以前他們之間如何的平衡？其實(shí)這個(gè)選擇器的效率低一點(diǎn)，對(duì)于大多數(shù)網(wǎng)站來(lái)說(shuō)并不會(huì)有太大的影響，但對(duì)于一個(gè)大型的網(wǎng)站，產(chǎn)生大量的流量這就會(huì)有差別了，也就很值得我們?nèi)?duì)他進(jìn)行優(yōu)化。那么我們就很有必要的去了解他們是如何工作，比如說(shuō)，一般情況下哪些選擇器的使用效率更高。來(lái)看兩個(gè)簡(jiǎn)單的例子： #myid 上面的選擇器高于下面的： p#myid 后者的寫法我發(fā)現(xiàn)還是有很多朋友這樣寫，但我不知道你為什么需要在ID前面加一個(gè)標(biāo)簽？難道你同一個(gè)頁(yè)面會(huì)有多個(gè)相同的ID不成？ 我們接下來(lái)在來(lái)看一個(gè)實(shí)例，用于列表上的，比如說(shuō)我們制作導(dǎo)航菜單的： #nav a 高效于： #nav li a 上面只是介紹了兩個(gè)常碰到的實(shí)例，在這里說(shuō)這兩個(gè)實(shí)例，主要目的是讓你在今后的編寫樣式時(shí)，能注意這方面的的細(xì)節(jié)，從而加快你的代碼效率。
網(wǎng)站設(shè)計(jì)制作過(guò)程拒絕使用模板建站；使用PHP+MYSQL原生開(kāi)發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十多年的成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司。
css的基本語(yǔ)法
cascading stylesheet(級(jí)聯(lián)樣式表)。為網(wǎng)頁(yè)提供外觀（也就是，網(wǎng)頁(yè)的表現(xiàn)形式）。將網(wǎng)頁(yè)的外觀寫在一個(gè)css文件里，方便頁(yè)面代碼的維護(hù)（將表現(xiàn)與數(shù)據(jù)分離）。為方便大家學(xué)習(xí)css，我為大家分享css的基本語(yǔ)法如下：
css的基本語(yǔ)法
選擇器{
屬性1:屬性值1;
屬性n:屬性值n;
符合選擇器要求的標(biāo)記，會(huì)添加對(duì)應(yīng)的樣式。
Chrome瀏覽器為SVG和CSS添加GPU加速功能
互聯(lián)網(wǎng)有消息透露，谷歌正在為Chrome瀏覽器增加新的GPU加速功能。Chrome18瀏覽器將內(nèi)建開(kāi)關(guān)選項(xiàng)，讓消費(fèi)者選擇使用GPU硬件加速基于矢量的SVG圖形和CSS過(guò)濾器，讓Chrome瀏覽器在未來(lái)網(wǎng)頁(yè)顯示上獲得突破性速度，并且達(dá)成驚人的視覺(jué)效果。
Chrome瀏覽器的SVG和CSSGPU加速支持Windows，Mac，Linux和谷歌的Chrome操作系統(tǒng)，但目前這個(gè)功能仍然主要是實(shí)驗(yàn)性質(zhì)，因?yàn)橹挥袔讉€(gè)少數(shù)網(wǎng)站部署了SVG和CSSGPU加速。
但也有信息表示，tomshardware測(cè)試發(fā)現(xiàn)Chrome這項(xiàng)功能在顯示目前網(wǎng)頁(yè)方面，顯示速度并沒(méi)有出現(xiàn)任何顯著增加，在WebVizHTML5基準(zhǔn)測(cè)試當(dāng)中出現(xiàn)了不穩(wěn)定和崩潰問(wèn)題。
評(píng)論表示，雖然SVG和CSSGPU加速還有待完善，但是Mozilla火狐、微軟IE和其他版本瀏覽器之間的競(jìng)爭(zhēng)，肯定會(huì)推動(dòng)這種技術(shù)快速發(fā)展和完善。
設(shè)置容器中的內(nèi)容垂直居中css代碼
如實(shí)例1設(shè)置網(wǎng)頁(yè)整體居中的代碼中內(nèi)容是居容器的頂部的，而在表格布局時(shí)默認(rèn)是垂直居中的，當(dāng)我們需要垂直居中的時(shí)候該怎么辦呢？別害怕，跟我來(lái)，也是比較簡(jiǎn)單的，只用設(shè)置容器內(nèi)的行高就行了。
line-height:500px;
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""
htmlxmlns=""
head
metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/
title標(biāo)準(zhǔn)之路;/title
style
#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}
/style
/head
bodypid="layout"標(biāo)準(zhǔn)之路 /p
/body
/html
提示：可以先修改部分代碼后再運(yùn)行
這是一種方法，另外和種方法就是設(shè)置的`它內(nèi)邊距padding了，自己可以試試喲～～
CSS對(duì)不同瀏覽器的兼容性解決辦法
CSS 對(duì)不同瀏覽器的兼容性解決辦法由于CSS 在不同瀏覽器中存在兼容性問(wèn)題，所以在使用 p+CSS 布局中，可能導(dǎo)致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果，為了解決這些方面的問(wèn)題，以下針對(duì)CSS 某些屬性的用法提出相應(yīng)的一些解決辦法。 1、頁(yè)面居中問(wèn)題在IE 瀏覽器下，可以通過(guò)定義CSS 樣式body {text- align: center;}來(lái)實(shí)現(xiàn)頁(yè)面居中，但在FireFox（以下簡(jiǎn)寫為FF）瀏覽器下此屬性就失效了。解決辦法：使用"margin- left: auto; margin- right : auto; " 、padding 屬性在不同瀏覽器的顯示問(wèn)題當(dāng)給p 設(shè)置padding 屬性后，在FF 瀏覽器中會(huì)導(dǎo)致 width 和height 增加(p 的實(shí)際寬度=p 寬+Padding), 但在 IE 瀏覽器中width 和height 不會(huì)增加，這就導(dǎo)致相同的內(nèi)容在不同瀏覽器中出現(xiàn)不同的顯示效果。解決辦法：給p 設(shè)定IE、FF 兩個(gè)寬度，在IE 的寬度前加上IE 特有標(biāo)記" * " 號(hào)。例如： #pwidth{ padding:5px; width:100px; *width:110px; } 3、奇怪的間隙問(wèn)題有的時(shí)候我們明明設(shè)好了高度，可在IE6 上卻看見(jiàn)一些奇怪的間隙。解決辦法：試試在有空隙的p 上加上"font- size:0px;" 4、關(guān)于手形光標(biāo)要將頁(yè)面內(nèi)容的光標(biāo)顯示為手形，通常的做法是使CSS 屬性cursor: hand; 但這于做法只適用于IE. 解決辦法：cursor: pointer; 5、浮動(dòng)在IE6 產(chǎn)生雙倍距離問(wèn)題例如： #box{ float:left; width:100px; margin:0 0 0 100px; } 這種情況之下IE6 會(huì)產(chǎn)生200px 的距離。解決辦法：在以上屬性的基礎(chǔ)上，加上display:inline，使浮動(dòng)忽略。6、UL 和FORM標(biāo)簽的padding 與margin ul 標(biāo)簽在FF 中默認(rèn)是有padding 值的, 而在IE 中只有 margin 默認(rèn)有值。FORM標(biāo)簽在IE 中,將會(huì)自動(dòng)margin 一些邊距,而在FF 中margin 則是0；解決辦法：css 中首先都使用這樣的樣式ul,form{margin:0; padding:0;}。 7、截字省略號(hào) .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 這個(gè)CSS 是定義當(dāng)內(nèi)容溢出寬度后會(huì)自行的截掉超出部分的文字，并以省略號(hào)結(jié)尾，但注意Firefox 并不支持。
p+CSS 網(wǎng)頁(yè)布局的分類
p+CSS 網(wǎng)頁(yè)布局的分類1、一列固定寬度一列布局是所有布局的基礎(chǔ)，也是最簡(jiǎn)單的布局方式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列固定寬度CSS 代碼： #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 2、一列自適應(yīng)寬度自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小自動(dòng)改變其寬度和高度值，是網(wǎng)頁(yè)設(shè)計(jì)中一種非常靈活的布局形式，用 p+CSS 布局的代碼如下： XHTML 代碼： 一列自適應(yīng)寬度CSS 代碼： #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 3、一列固定寬度居中頁(yè)面整體居中是網(wǎng)頁(yè)布局中最常見(jiàn)到形式，在傳統(tǒng)的表格布局中，使用TABLE 的align="center" 屬性來(lái)實(shí)現(xiàn)，在p+CSS 布局中采用如下代碼來(lái)實(shí)現(xiàn)：XHTML 代碼： 一列自適應(yīng)寬度CSS 代碼： p+CSS 網(wǎng)頁(yè)布局方法探析。如今的網(wǎng)頁(yè)設(shè)計(jì)考慮得更多的是搜索引擎以及給用戶帶來(lái)更多的便利，傳統(tǒng)的TABLE 網(wǎng)頁(yè)布局由于其龐大的HTML 代碼，使得其在搜索引擎方面顯得有些無(wú)能為力，而用p+CSS 進(jìn)行網(wǎng)頁(yè)布局具有代碼精簡(jiǎn)的優(yōu)點(diǎn)使得其在這方面又體現(xiàn)出更多的優(yōu)勢(shì)。但是又由于CSS 對(duì)不同瀏覽器存在兼容性問(wèn)題，所以對(duì)于初學(xué)者來(lái)說(shuō)，在使用p+CSS 進(jìn)行網(wǎng)頁(yè)布局過(guò)程中可能會(huì)遇到各種問(wèn)題，本文就給大家探討幾點(diǎn)p+CSS 布局的技巧。4、二列固定寬度在有一列固定寬度布局的基礎(chǔ)上，實(shí)現(xiàn)二列固定寬度也就很簡(jiǎn)單了，用p+CSS 布局的代碼如下：XHTML 代碼： 左側(cè)右側(cè)CSS 代碼： #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 5、二列固定寬度居中從一列固定寬度居中的布局方法中，我們就不難完成二列固定寬度居中了，可以使用一個(gè)居中的p 作為容器，將二列分欄的p 放置在容器中，從而就實(shí)現(xiàn)二列的居中顯示。 p+CSS 的代碼如下： XHTML 代碼： 左側(cè)右側(cè)CSS 代碼： #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 這里僅列舉了一列、二列的布局方式，實(shí)際上三列、四列等多列的布局方式也和二列的布局方式的實(shí)現(xiàn)方法是一樣的。事實(shí)上不管多么復(fù)雜的頁(yè)面設(shè)計(jì)，在p+CSS 網(wǎng)頁(yè)布局中，均是以p 為基礎(chǔ)，通過(guò)一列、二列、三列這些基礎(chǔ)的布局方式的相互組合與嵌套來(lái)實(shí)現(xiàn)復(fù)雜的布局。
p+CSS網(wǎng)頁(yè)布局技巧：設(shè)置網(wǎng)頁(yè)整體居中的css代碼
以前用表格布局時(shí)設(shè)置網(wǎng)頁(yè)居中非常方便，把表格對(duì)齊方式設(shè)置為居中就行了，就這么簡(jiǎn)單，現(xiàn)在呢，用p+CSS樣式表控制，好像不是那么容易了，其實(shí)也很簡(jiǎn)單，只不過(guò)方式不同而已。
style
#layout { width:778px; margin:0 auto; text-align:center;}
/style
p id="layout"標(biāo)準(zhǔn)之路;/p
請(qǐng)看這段代碼，寬度為適合800×600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設(shè)置為0，左右設(shè)為自動(dòng)。這樣它就居中了。
那么可能你要問(wèn)了，text-align:center;為什么還要讓內(nèi)容居中呢？呵呵，別著急，這句是為了適應(yīng)IE6以下版本的瀏覽器而加的，IE6以下對(duì)margin:0 auto;不能解析為居中，所以用這種方式來(lái)補(bǔ)救，以下在設(shè)計(jì)內(nèi)容時(shí)再用 text-align:left;就可以了。
注：margin和padding的值的順序?yàn)轫槙r(shí)針上右下左，如margin:1px 2px 3px 4px;還可以縮寫為上下、左右，如本例，如果為margin:0px;則是各邊都為0
提示：可以先修改部分代碼后再運(yùn)行
;
主要都圍繞知識(shí)點(diǎn)的理解與css兼容性問(wèn)題上，請(qǐng)參考下面的
2.1 link和@import都可以為頁(yè)面引入CSS文件，其區(qū)別是？
將樣式定義在單獨(dú)的.css的文件里，link和@import都可以在html頁(yè)面引入css文件。有l(wèi)ink和@import兩種方式，導(dǎo)入方式如下：
link方式：link rel=”stylesheet” type=”text/css” href=”aa.css”
@import方式：style type=”text/css”@import “aa.css”;/style
link和@import兩種導(dǎo)入css文件的區(qū)別：
祖先的差別。Link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。Link標(biāo)簽除了可以加載CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能加載css了。
加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候，link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開(kāi)始會(huì)沒(méi)有樣式（就是閃爍），網(wǎng)速慢時(shí)更為明顯。
兼容性的差別。由于@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。
使用DOM控制樣式時(shí)的差別。當(dāng)使用JavaScript控制DOM去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表，比如可以創(chuàng)建一個(gè)主樣式表，在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性？
CSS使用層疊的原則來(lái)考慮繼承、層疊次序和優(yōu)先級(jí)等重要特征，從而判斷相互沖突的規(guī)則中哪個(gè)規(guī)則應(yīng)該起作用。
繼承性是指，許多CSS的樣式規(guī)則不但影響選擇器所定義的元素，而且會(huì)被這些元素的后代繼承。
層疊性是指，當(dāng)一個(gè)web頁(yè)面使用多個(gè)樣式表，多個(gè)樣式表中的樣式可層疊為一個(gè)。在多個(gè)樣式表之間所定義的樣式?jīng)]有沖突的時(shí)候，瀏覽器會(huì)顯示所有的樣式。
優(yōu)先級(jí)是指，當(dāng)發(fā)生樣式定義沖突時(shí)，瀏覽器首先會(huì)按照不同樣式規(guī)則的優(yōu)先級(jí)來(lái)應(yīng)用樣式。CSS樣式的優(yōu)先級(jí)如下所示（其中數(shù)字3擁有最高的優(yōu)先權(quán)）：
1.瀏覽器缺省設(shè)置；
2.外部樣式表（.css文件）或者內(nèi)部樣式表（位于head元素內(nèi)部）；
3.內(nèi)聯(lián)樣式（作為某個(gè)元素的style屬性的值）。
同等優(yōu)先級(jí)下，以最后定義的樣式為準(zhǔn)，important比內(nèi)聯(lián)高。
2.3 哪些屬性可以繼承？
Css中可以繼承的屬性如下：
文本相關(guān)屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相關(guān)屬性：list-style-image、list-style-position、list-style-type、list-style；
表格相關(guān)屬性：border-collapse、border-spacing、caption-side、table-layoute；
其他屬性：Cursor、visibility；
2.4 CSS選擇器中，元素選擇器和類選擇器的區(qū)別是什么？
元素選擇器是常見(jiàn)的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個(gè)HTML元素，比如p、h1、em、a等，甚至可以是html元素本身。
類選擇器用于將樣式規(guī)則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時(shí)，首先要定義樣式類，其語(yǔ)法為：
.className{ }；
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設(shè)置為”className”，則可以將類選擇器的樣式與元素關(guān)聯(lián)。
在實(shí)際使用時(shí)，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，最常用的方法就是使用類選擇器。
2.5 簡(jiǎn)要描述CSS中的定位機(jī)制
CSS中，除了默認(rèn)的流定位方式以外，還有如下幾種定位機(jī)制：浮動(dòng)定位、相對(duì)定位、絕對(duì)定位和固定定位。
浮動(dòng)定位是將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內(nèi)。
相對(duì)定位將元素相對(duì)于它在普通流中的位置進(jìn)行定位。
絕對(duì)定位是指將元素的內(nèi)容從普通流中完全移除，并且可以使用偏移屬性來(lái)固定該元素的位置。
固定定位是指將元素的內(nèi)容固定在頁(yè)面的某個(gè)位置。
2.6 display屬性和 visibility屬性的區(qū)別？
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設(shè)置為block，可以讓行內(nèi)元素表現(xiàn)得像塊級(jí)元素一樣；
2.如果將display屬性設(shè)置為inline，可以讓塊級(jí)元素表現(xiàn)得像內(nèi)聯(lián)元素一樣；
3.可以通過(guò)把display屬性設(shè)置為none，讓生成的元素根本沒(méi)有框。這樣的話，該框及其所有內(nèi)容就不在顯示，不占用文檔中的空間。
在DIV設(shè)計(jì)中，室友display:none屬性后，HTML元素（對(duì)象）的寬度。高度等各種
屬性都將”丟失”；而使用visibility:hidden屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見(jiàn)（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說(shuō)它仍具有高度、寬度等屬性值。
2.7 簡(jiǎn)述對(duì)CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具備內(nèi)容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個(gè)元素都被視為一個(gè)框，而每個(gè)框都有三個(gè)屬性：
border：元素的邊框（可能不可見(jiàn)），用于將框的邊緣與其他框分開(kāi)；
margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁(yè)邊空白；
padding：內(nèi)邊距，表示框內(nèi)容和邊框之間的空間。
盒子模型的結(jié)構(gòu)如圖所示：
由上圖可以看出，width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、外邊距和邊框不會(huì)影響到內(nèi)容區(qū)域的尺寸，但會(huì)增加元素框的總尺寸。
因此，如果在一個(gè)具有邊框的元素中放置文本，往往需要設(shè)置一些內(nèi)邊距，以便文本的邊緣不要接觸邊框，這樣更便于閱讀。而外邊距則可以在多個(gè)元素框之間創(chuàng)建空白，避免這些框都擠在一起。因此，在設(shè)計(jì)頁(yè)面時(shí)，經(jīng)常會(huì)使用padding屬性和margin屬性來(lái)設(shè)置頁(yè)面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設(shè)置了元素的邊距以后，會(huì)增加元素在頁(yè)面布局中所占的面積。
2.8 簡(jiǎn)述CSS3中的偽類選擇器？
CSS3提供了大量偽類選擇器，瀏覽器對(duì)于有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：
目標(biāo)偽類：即 :target，突出顯示活動(dòng)的HTML錨，用于選取當(dāng)前活動(dòng)的目標(biāo)元素；
元素狀態(tài)偽類：比如 :enabled、:disabled、:checked；
結(jié)構(gòu)偽類： 比如 :first-child、:last-child、:empty、:only-child；
否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個(gè)元素。
2.9 為什么建議設(shè)置背景圖像的同時(shí)還設(shè)置背景顏色？
一般建議在使用背景圖片的同時(shí)提供background-color屬性，并且將其設(shè)置為和圖像主要顏色類似的顏色。這樣，如果正在加載頁(yè)面，或者因?yàn)楦鞣N原因無(wú)法顯示背景圖像時(shí)，頁(yè)面可以使用這種顏色作為背景色。
2.10 如何居中div？如何居中一個(gè)浮動(dòng)元素？
給div設(shè)置一個(gè)寬度，然后設(shè)置元素的左右外邊距為auto，比如，margin:0 auto。則可以實(shí)現(xiàn)div居中顯示。
對(duì)于浮動(dòng)元素，設(shè)置其左右外邊距為關(guān)鍵字auto是無(wú)效的。此時(shí)，如果需要設(shè)置其居中顯示，可以：1.精確計(jì)算其左外邊距并進(jìn)行設(shè)置，實(shí)現(xiàn)居中顯示。
2.使用一個(gè)居中顯示的div元素包含次浮動(dòng)元素,
代碼如：div style=”margin:0 auto;”div style=”float:left;”/div/div
2.11 在設(shè)置文本的字體時(shí)，為什么建議設(shè)置替換字體？
可以使用font-family屬性來(lái)指定文本的字體，代碼如下所示：font-family:name/inherit;
此時(shí)，name為首選字體的名稱。如果字體名稱有多個(gè)單詞，即中間有空格，則需要將字體名稱用一對(duì)單引號(hào)或者雙引號(hào)包圍起來(lái)。
但是，如果用戶機(jī)器上并沒(méi)有安裝name所指定的字體，則會(huì)顯示默認(rèn)字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會(huì)影響頁(yè)面的布局，就可以解決問(wèn)題了。
我們可以為font-family屬性指定多種字體，且多種字體之間用逗號(hào)隔開(kāi)，這樣可以為頁(yè)面指定一個(gè)字體列表。如果用戶機(jī)器沒(méi)有第一種字體，則瀏覽器會(huì)查找字體列表中的下一種字體替代默認(rèn)字體顯示。如果找遍了字體列表還是沒(méi)有可以使用的字體，瀏覽器才會(huì)使用默認(rèn)字體顯示頁(yè)面。代碼如下所示：
h1{font-family:Georgia,serif;}
此時(shí)，如果用戶機(jī)器上沒(méi)有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對(duì)h1元素使用Times。盡管Times與Georgia并不完全匹配，但至少足夠接近。
因此，我們建議在所有font-family規(guī)則中都提供一個(gè)通用字體系列。這樣就提供了一條后路，在用戶機(jī)器無(wú)法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)通用字體作為替換。
2.12 內(nèi)聯(lián)元素可以實(shí)現(xiàn)浮動(dòng)嗎？
在CSS中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。因此，對(duì)于內(nèi)聯(lián)元素，如果設(shè)置為浮動(dòng)，會(huì)產(chǎn)生和塊級(jí)框相同的效果。
2.13 什么情況下需要額外設(shè)置表格的顯示規(guī)則？
默認(rèn)情況下（不額外設(shè)置表格的顯示規(guī)則時(shí)），表格按照自動(dòng)表格布局進(jìn)行顯示，即瀏覽器在顯示表之前查看每一個(gè)單元格，然后基于所有格的設(shè)置計(jì)算表單大小，而列的寬度是由列段元個(gè)中沒(méi)有折行的最寬的內(nèi)容設(shè)定的。此時(shí)，單元格的大小會(huì)適應(yīng)內(nèi)容的大小。
自動(dòng)表格布局的算法在表格復(fù)雜時(shí)會(huì)比較慢，這是由于它需要在確定最終的布局之前訪問(wèn)表格中多有的內(nèi)容。在不能提前確定每一列的大小時(shí)，這種方式會(huì)非常適用。
如果額外設(shè)置表格的顯示規(guī)則，即設(shè)置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決于表格寬度，列寬度，表格邊框?qū)挾?，單元格間距，而與單元格的內(nèi)容無(wú)關(guān)。瀏覽器將使用某列指定的寬度來(lái)計(jì)算布局，并使用該寬度計(jì)算該列中所有其他單元格的寬度。
固定表格布局與自動(dòng)表格布局相比，允許瀏覽器更快地對(duì)表格進(jìn)行布局。因?yàn)槿绻付ㄊ褂霉潭ū砀癫季?，瀏覽器在接收到第一行后就可以顯示表格。如果表格龐大且已經(jīng)指定了大小，則會(huì)加速表的顯示。
2.14 簡(jiǎn)要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用，來(lái)插入生成內(nèi)容，可以在元素之前或之后放置生成的內(nèi)容?？梢圆迦胛谋尽D像、引號(hào)，并可以結(jié)合計(jì)數(shù)器為頁(yè)面元素插入編號(hào)。比如，查看如下代碼：
body {counter-reset:chapter;}
h1:before { content:”第”counter(chapter)”章”;}
h1 { counter-increment:chapter;}
使用content屬性，并結(jié)合:before選擇器和計(jì)數(shù)器counter，可以在每個(gè)h1元素前插入新的內(nèi)容。
2.15 CSS Sprite是什么，談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)
CSS Sprite是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的組合進(jìn)行背景定位。
其優(yōu)點(diǎn)在于：①減少網(wǎng)頁(yè)的http請(qǐng)求，提高性能，這也是CSS Sprite最大的優(yōu)點(diǎn)，
也是其被廣泛傳播和應(yīng)用的主要原因；
②減少圖片的字節(jié)，多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和；
③較少了命名困擾，只需對(duì)一張集合的圖片命名，不需要對(duì)每一個(gè)小元素進(jìn)行命名提高制作效率；
④更換風(fēng)格方便。只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變，維護(hù)起來(lái)更加方便；
但是CSS Sprite也存在一些不可忽視的缺點(diǎn)：
①圖片合成比較麻煩；
②背景設(shè)置時(shí)，需要得到每一個(gè)背景單元的精確位置；
③維護(hù)合成圖片時(shí)，最好只是向下加圖片，而不是更改已有圖片。
2.16 對(duì)CSS3有了解嗎？列舉幾個(gè)CSS3的新特性并簡(jiǎn)要描述
CSS3作為CSS技術(shù)的升級(jí)版本，著力于模塊化發(fā)展，將規(guī)范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；并加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過(guò)渡、多欄布局、2D/3D轉(zhuǎn)換、動(dòng)畫等。
其中，CSS3提供了一些復(fù)雜選擇器，用于實(shí)現(xiàn)頁(yè)面復(fù)雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用于為元素設(shè)置漸變效果的背景；轉(zhuǎn)換可以實(shí)現(xiàn)元素的變換，比如位移、縮放、旋轉(zhuǎn)等；過(guò)渡可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果；動(dòng)畫屬性則可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫，可以實(shí)現(xiàn)逐幀制作動(dòng)畫。
2.17 過(guò)渡與動(dòng)畫的區(qū)別是什么？
過(guò)渡屬性transition可以在一定的事件內(nèi)實(shí)現(xiàn)元素的狀態(tài)過(guò)渡為最終狀態(tài)，用于模擬一種過(guò)渡動(dòng)畫效果，但是功能有限，只能用于制作簡(jiǎn)單的動(dòng)畫效果；
動(dòng)畫屬性animation可以制作類似Flash動(dòng)畫，通過(guò)關(guān)鍵幀控制動(dòng)畫的每一步，控制更為精確，從而可以制作更為復(fù)雜的動(dòng)畫。
2.18 什么是CSS reset？
CSS reset，又叫做CSS重寫或者CSS重置，用于改寫HTML標(biāo)簽的默認(rèn)樣式。
有些HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式，例如p標(biāo)簽有上下邊距，li標(biāo)簽有列表標(biāo)識(shí)符號(hào)等。這些默認(rèn)樣式在不同瀏覽器之間也會(huì)有差別，例如ul默認(rèn)帶有縮進(jìn)的樣式，在IE下，它的縮進(jìn)是通過(guò)margin實(shí)現(xiàn)的，而Firefox下，它的縮進(jìn)是由padding實(shí)現(xiàn)的。著必然會(huì)帶來(lái)瀏覽器兼容問(wèn)題。
因此，在CSS代碼中，可以使用CSS代碼去掉這些默認(rèn)樣式，即重新定義標(biāo)簽樣式，從而覆蓋瀏覽器的CSS默認(rèn)屬性，即CSS reset。
需要注意的是，在進(jìn)行樣式重寫時(shí)，不建議使用 * 選擇器進(jìn)行重寫，這樣會(huì)降低效率，影響性能。
2.19 如何清除浮動(dòng)元素所帶來(lái)的影響？
浮動(dòng)定位是指將元素排除在普通流之外，并且將它放置在包含框的左邊或者右邊，但是依舊位于包含框之內(nèi)。也就是說(shuō)，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
由于浮動(dòng)框不在文檔的普通流中，所以元素浮動(dòng)之后，其原有位置不再保留，其他元素的位置會(huì)受到影響。
如果需要清除左側(cè)或者右側(cè)浮動(dòng)元素帶來(lái)的影響，則可以使用clear屬性來(lái)設(shè)置。另外，包含框呃逆的子元素浮動(dòng)后，如果包含框沒(méi)有設(shè)置具體的高度，則其高度會(huì)發(fā)生變化，此時(shí)，可以使用overflow屬性來(lái)清除子元素浮動(dòng)后帶來(lái)的影響。
2.20 談?wù)勀銓?duì)瀏覽器兼容性問(wèn)題的理解
瀏覽器的類型及版本的不同會(huì)造成CSS效果不盡相同，因此需要實(shí)現(xiàn)瀏覽器兼容，也可以針對(duì)不同的瀏覽器編寫不同的CSS。
目前，各主流瀏覽器的新版本，對(duì)應(yīng)W3C的標(biāo)準(zhǔn)支持很好，因此，首先保證代碼符合W3C的標(biāo)準(zhǔn)，這是解決瀏覽器兼容問(wèn)題的前提。
其次，對(duì)于某些支持受限的屬性，針對(duì)不同的瀏覽器添加相應(yīng)的前綴，比如-webkit-、-o-、-moz-。
第三，對(duì)于IE的低版本，可以編寫帶有特定前綴的代碼，實(shí)現(xiàn)版本識(shí)別。比如：
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#f1ee18\9;/*IE6 7 8識(shí)別*/
+background-color:#f1ee18;/*IE6 7識(shí)別*/
_background-color:#f1ee18;/*IE6識(shí)別*/
}
另外，對(duì)于特定的兼容性問(wèn)題，特殊解決。常見(jiàn)的特殊問(wèn)題有：
1.使用CSS reset：對(duì)于有些HTML標(biāo)簽，瀏覽器默認(rèn)的margin和padding不同，可以使用CSS代碼改寫默認(rèn)的樣式效果，從而實(shí)現(xiàn)統(tǒng)一
2.IE低版本中，不能使用auto關(guān)鍵字實(shí)現(xiàn)塊級(jí)元素居中顯示，可以改用設(shè)置父元素的text-align；
3.子元素設(shè)置上外邊距時(shí)，父元素需要設(shè)置邊框或者外邊距；
4.外邊距合并問(wèn)題。
CSS簡(jiǎn)寫就是指將多行的CSS屬性聲明化成一行，又稱為CSS代碼優(yōu)化。CSS簡(jiǎn)寫的最大好處就是能夠顯著減少CSS文件的大小，其實(shí)還有很多其他益 處。臃腫而雜亂的CSS樣式表會(huì)使你遇到問(wèn)題是難以調(diào)試。尤其是當(dāng)一個(gè)團(tuán)隊(duì)在進(jìn)行設(shè)計(jì)的時(shí)候，你的臃腫的CSS代碼會(huì)使你的團(tuán)隊(duì)其他成員的工作效率下降。
今天，整理了一些CSS簡(jiǎn)寫技巧，它們其實(shí)是CSS最常用的寫法，但是太多的人使用Dreamweaver這種所見(jiàn)即所得軟件來(lái)編寫CSS，使得代碼過(guò) 于臃腫。不過(guò)沒(méi)關(guān)系，看過(guò)本文之后，你一能能掌握CSS代碼優(yōu)化的技巧，今后讓你的每一個(gè)CSS樣式表都看起來(lái)整潔而簡(jiǎn)短吧。
屬性值為0
書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會(huì)這樣寫:
padding:10px5px0px0px;
試試這樣吧:
padding:10px5px00;
移除選擇器
選擇器是你在為一些元素應(yīng)用CSS樣式時(shí)的基本方法，比如h1,h2,h2,div,strong,pre,ul,ol等等…如果你使用了class(.類名)或ID(#id名),那么就不用再在聲明CSS時(shí)包含選擇器了。
div#logowrap
嘗試扔掉多余的選擇器吧:
#logowrap
在這個(gè)例子中所謂的那個(gè)選擇器就是div
*總愛(ài)和你開(kāi)玩笑
要明智的使用*而避免它在整個(gè)CSS樣式表中亂開(kāi)玩笑，*是個(gè)通配符，你可以使用它來(lái)為你的設(shè)計(jì)部分或全部進(jìn)行一系列CSS聲明。例如:
*{
margin:0;
}
這個(gè)聲明會(huì)將所有元素的margin值設(shè)置為0，同樣的，為了嚴(yán)謹(jǐn)起見(jiàn)，你可以嘗試這樣設(shè)置:
#menu*{
margin:0;
}
這樣的聲明是指將#menu下的所有元素的margin設(shè)為0。
背景
背景(background)屬性可能會(huì)包含設(shè)置背景色、背景圖、背景圖的位置和背景圖重復(fù)方式的參數(shù)，你可能會(huì)寫成:
background-image:url(”logo.png”);
background-position:topcenter;
background-repeat:no-repeat;
其實(shí)可以寫成:
background:url(logo.png)no-repeattopcenter;
顏色
顏色(color)屬性在CSS通常指定為一個(gè)十六進(jìn)制的值,一個(gè)#加6位數(shù)，他的簡(jiǎn)寫方式是如果顏色值由成對(duì)兒出現(xiàn)的三對(duì)而數(shù)字組成，你可以省略掉沒(méi)對(duì)中的一個(gè)數(shù)字。
#000000可以寫成#000,#336699可以寫成#369
這種簡(jiǎn)寫技巧只適用于成對(duì)出現(xiàn)的顏色值，其它顏色值不適用這種技巧，比如:
#010101,#223345,#FFF000
Margin(外邊距/空白邊)
聲明CSSmagin值得時(shí)候通常會(huì)寫成這樣:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
讓我們?cè)囋嚢阎禐?的單位去掉，并把4條聲明合并成一條聲明:
margin:010px010px;
當(dāng)你生命padding、margin、border(還有一些其他屬性)時(shí)，記得要把按照順時(shí)針的方向來(lái)聲明屬性值，也就是按照上-右-下-左的方 向。關(guān)于這些屬性還有另一個(gè)更加簡(jiǎn)單的寫法，看看屬性中上和下、左和右是否值是相等的，如果是那么就可以進(jìn)一步優(yōu)化了，你可以省略掉后兩個(gè)值，剩下的兩個(gè) 值前者指上下，后者指左右:
margin:010px;
它是指左右的值為10px，上下的值為0；
Padding(內(nèi)邊距)
padding的簡(jiǎn)寫技巧等同于margin:
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
可以寫成:
padding:010px;
Borders(邊框)
邊框的簡(jiǎn)寫方式相比其它生命來(lái)說(shuō)會(huì)比較復(fù)雜，很多CSSer一開(kāi)始都容易記混它的簡(jiǎn)寫順序，如果你想聲明一個(gè)1像素寬的實(shí)線黑色邊框，可能會(huì)寫成:
border-width:1px;
border-style:solid;
border-color:#000;
其實(shí)可以寫成:
border:1pxsolid#000;
注意:這里的顏色值已經(jīng)使用了上面講過(guò)的顏色簡(jiǎn)寫方法了哦。
我們還可以為四個(gè)邊設(shè)置不同的寬度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
可以簡(jiǎn)寫成:
border-width:1px2px3px4px;
最后，我們還可以只設(shè)置左和右的邊的樣式:
border-right:1pxsolid#000;
border-bottom:1pxsolid#000;
雖然并沒(méi)減少多少代碼,但暴風(fēng)彬彬建議寫成這樣:
border:1pxsolid#000;
border-width:01px1px0;
先設(shè)置四個(gè)邊的默認(rèn)風(fēng)格，然后聲明具體的哪個(gè)邊要顯示。
文字
文字屬性也有很多可能會(huì)用到的屬性值，像背景一樣，你可能會(huì)聲明這種復(fù)雜的文字樣式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋體,Arial,sans-serif;
其實(shí)可以優(yōu)化成一行:
font:italicsmall-capsbold1em/150%宋體,Arial,sans-serif;
列表
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);
可以寫成:
list-style:squareinsideurl(filename.gif);
工具/材料
notepad++
瀏覽器
打開(kāi)Notepad++，先輸入個(gè)頁(yè)面框架
！DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了，那么就該定義頁(yè)面的title，關(guān)鍵詞keyword，和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title純css二級(jí)導(dǎo)航下拉菜單/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
這些內(nèi)容只能在head/head中完成。
定義頁(yè)面使用的css樣式，也是需要在head里定義的。
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只選擇nav下一級(jí)里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格，必須后面的元素只比前面的低一個(gè)級(jí)別。
這里根據(jù)你的需求來(lái)自己定義。
--
/style
添加一個(gè)DIV標(biāo)簽，在頁(yè)面中劃分出一個(gè)塊來(lái)，用來(lái)顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個(gè)盒子來(lái)描述
然后使用無(wú)序標(biāo)簽ul+樣式li 來(lái)實(shí)現(xiàn)模塊。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問(wèn)問(wèn)/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代碼吧，可以參考一下啊，
!DOCTYPE html
html xmlns=""http://允許你通過(guò)一個(gè)網(wǎng)址來(lái)識(shí)別你的標(biāo)記
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css實(shí)現(xiàn)下拉菜單"
meta name="description" content="搜狗略懂、css分享"
titlecss實(shí)現(xiàn)下拉導(dǎo)航欄菜單/title
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只選擇nav下一級(jí)里面的ul元素
nav ul選擇nav內(nèi)所包含的所有ul元素
navul比nav ul限定更嚴(yán)格，必須后面的元素只比前面的低一個(gè)級(jí)別。
這里根據(jù)你的需求來(lái)自己定義。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問(wèn)問(wèn)/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可
特別提示
寫代碼過(guò)程中一定要記得換行，開(kāi)頭留空，否則過(guò)后找東西，連你自己都不知道寫的是什么。何談從哪里找起？
重慶分公司
重慶分公司
