|
|
|
| 14個(gè)建站CSS技巧及常見(jiàn)問(wèn)題 |
|
7、不要給背景圖片路徑加引號(hào)
將background:url("xxx.gif")改為background:url(xxx.gif)
因?yàn)閷?duì)于部分瀏覽器加引號(hào)反而會(huì)引起錯(cuò)誤。
8、背景圖片的路徑是相對(duì)與當(dāng)前css頁(yè)面的路徑。
例如：
有如下目錄結(jié)構(gòu)
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
代碼內(nèi)容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif圖片其寫(xiě)法為：background:url(../images/xxx.gif)
9、使用組選擇器為不同元素應(yīng)用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體
10、書(shū)寫(xiě)正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，一定要注意其書(shū)寫(xiě)順序，即：:link :visited :hover :active。
如果不按照該順序書(shū)寫(xiě)可能無(wú)法達(dá)到自己希望的效果。為了記憶該順序我們抽取每個(gè)單詞的首字母：L V H A，你可以通過(guò)記憶LoVe,Hate,兩個(gè)單詞來(lái)記住其順序。
11、禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過(guò)一些css屬性來(lái)達(dá)到這些要求。
禁止換行：white-space:nowrap
強(qiáng)制換行：word-wrap: break-word; word-break: normal;
12、區(qū)別relative和absolute
Absolute，CSS中的寫(xiě)法是：position:absolute; 他的意思是絕對(duì)定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒(méi)有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
Relative，CSS中的寫(xiě)法是：position:relative; 他的意思是絕對(duì)相對(duì)定位，他是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(jí)則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。
13、區(qū)別div和span
div是一個(gè)塊級(jí)元素，可以包含段落，表格等內(nèi)容，用于放置不同的內(nèi)容。一般我們?cè)诰W(wǎng)頁(yè)通過(guò)div來(lái)布局定位網(wǎng)頁(yè)中的每個(gè)區(qū)塊。
span是一個(gè)內(nèi)聯(lián)元素，沒(méi)有實(shí)際意義，它的存在純粹是為了應(yīng)用樣式，給一段內(nèi)容加上<span></span>標(biāo)記可以通過(guò)在span上定義樣式來(lái)設(shè)定其內(nèi)容的樣式。
14、區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個(gè)元素
但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的位置空間仍然被保留。
而display:none則相當(dāng)把元素從頁(yè)面中去除，其占用位置也將被刪除。
上一頁(yè) [1] [2] [3] |
|
|
您現(xiàn)在的位置： 
