這是原文
Ten CSS tricks you may not know大意如下:
1. CSS font shorthand ruleCSS 縮寫(xiě)
比如
font-style:bold;ling-height:130%;font-size:12px;
可以縮寫(xiě)為
font:bold 12px/130%
2. Two classes together同時(shí)使用多個(gè) class
多個(gè)class中間空格分開(kāi),如 <div class="oMenu oEm">
3. CSS border default value邊框使用默認樣式
邊框默認的為 soild,寬度為medium,大約3-4像素,顏色與包含的文字內容一樣。
4. !important ignored by IE用!important來(lái)區分IE
比如:
margin-top: 3.5em !important; margin-top: 2em
非IE瀏覽器會(huì )優(yōu)先使用 3.5em,而IE根據先后順序關(guān)系,使用 2em
5. Image replacement technique圖片替換技術(shù)
比如:
<img alt="[color]圖片說(shuō)明[/color]">
搜索引擎對這樣 alt 不如真正的文字敏感??梢赃@樣來(lái)優(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 alternativeCSS盒式模型
簡(jiǎn)單地說(shuō),就是把padding和border這種IE不消化的東西,通過(guò) div 嵌套逃避過(guò)去。(在里面那個(gè)div設置 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頁(yè)面中間對齊
IE 不認識 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 containerCSS定位
實(shí)際上就是古老的“層嵌套”,外面 relative 里面 absolute,這樣的 absolute 就是相對外面的容器而不再是body(整個(gè)頁(yè)面)了
10. Background colour running to the screen bottom背景顏色走到底
有時(shí)頁(yè)面需要某一列背景色走到底,但這列內容沒(méi)那么多,這時(shí)可以用背景來(lái)做。
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請
點(diǎn)擊舉報。