|
这是原文 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 同时使用多个 class 多个class中间空格分开,如 <div class="oMenu oEm"> 3. CSS border default value 边框使用默认样式 边框默认的为 soild，宽度为medium，大约3-4像素，颜色与包含的文字内容一样。 4. !important ignored by IE 用!important来区分IE 比如： margin-top: 3.5em !important; margin-top: 2em 非IE浏览器会优先使用 3.5em，而IE根据先后顺序关系，使用 2em 5. Image replacement technique 图片替换技术 比如： <img alt="[color]图片说明[/color]"> 搜索引擎对这样 alt 不如真正的文字敏感。可以这样来优化搜索引擎（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 嵌套逃避过去。（在里面那个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 页面中间对齐 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 container CSS定位 实际上就是古老的“层嵌套”，外面 relative 里面 absolute，这样的 absolute 就是相对外面的容器而不再是body（整个页面）了 10. Background colour running to the screen bottom 背景颜色走到底 有时页面需要某一列背景色走到底，但这列内容没那么多，这时可以用背景来做。 body { background: url(blue-image.gif) 0 0 repeat-y; } |
|
|
