這是原文 Ten CSS tricks you may not know 大意如下: 1. CSS font shorthand rule CSS 縮寫 比如 font-style:bold;ling-height:130%;font-size:12px; 可以縮寫為 font:bold 12px/130% 2. Two classes together 同時(shí)使用多個(gè) class 多個(gè)class中間空格分開,如 <div class="oMenu oEm"> 3. CSS border default value 邊框使用默認(rèn)樣式 邊框默認(rèn)的為 soild,寬度為medium,大約3-4像素,顏色與包含的文字內(nèi)容一樣。 4. !important ignored by IE 用!important來區(qū)分IE 比如: margin-top: 3.5em !important; margin-top: 2em 非IE瀏覽器會(huì)優(yōu)先使用 3.5em,而IE根據(jù)先后順序關(guān)系,使用 2em 5. Image replacement technique 圖片替換技術(shù) 比如: <img alt="[color]圖片說明[/color]"> 搜索引擎對這樣 alt 不如真正的文字敏感??梢赃@樣來優(yōu)化搜索引擎(SEO) CSS部分: h1 { background: url(widget-image.gif) no-repeat; } h1 span { position: absolute; left:-2000px; } HTML 代碼: <h1><img src="widget-image.gif" alt="Buy widgets" /></h1> 6. CSS box model hack alternative CSS盒式模型 簡單地說,就是把padding和border這種IE不消化的東西,通過 div 嵌套逃避過去。(在里面那個(gè)div設(shè)置 padding 和 border) 代碼如下: <style> #box { width: 150px; } #box div { border: 5px; padding: 20px; } </style> <div id="box"><div>...</div></div> 7. Centre aligning a block element 頁面中間對齊 IE 不認(rèn)識 margin:auto,所以這樣 <style> body { text-align: center; } #content { text-align: left; width: 700px; margin: 0 auto; } </style> <body> <div id="content"> ... 8. Vertically aligning with CSS 垂直對齊 vertical-align 不好使,可以試試 line-height 9. CSS positioning within a container CSS定位 實(shí)際上就是古老的“層嵌套”,外面 relative 里面 absolute,這樣的 absolute 就是相對外面的容器而不再是body(整個(gè)頁面)了 10. Background colour running to the screen bottom 背景顏色走到底 有時(shí)頁面需要某一列背景色走到底,但這列內(nèi)容沒那么多,這時(shí)可以用背景來做。 body { background: url(blue-image.gif) 0 0 repeat-y; } |
|
联系客服
微信扫码,添加客服企业微信
客服QQ:
1732698931联系电话:4000-999-276
客服工作时间9:00-18:00,晚上非工作时间,请在微信或QQ留言,第二天客服上班后会立即联系您。