css技巧以及经验总结

html css 十一条网页设计经典实用的代码片段

Div+CSS 规则整理 以及注意问题

10条HTML代码编写技巧

CSS常见的问题和技巧总结

a:link{color:#03c;}

a:visited{color:#666;}

a:hover{color:#f30;}

a:active{color:#c30;}

/* 按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）*/

#test{zoom:1;}

#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

/* #test为浮动元素的父元素 */

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}

#test p{*position:absolute;*top:50%;*left:50%;margin:0;}

#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

/* #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中 */

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}

.outer .inner{position:relative\9;}

<div class="outer">

<div class="inner">我是不透明的内容</div>

</div>

/* 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果 */

#test{border-collapse:collapse;border:1px solid #ddd;}

#test th,#test td{border:1px solid #ddd;}

<table id="test">

<tr><th>姓名</th><td>Joy Du</td></tr>

<tr><th>年龄</th><td>26</td></tr>

</table>

#test{border-spacing:1px;background:#ddd;}

#test tr{background:#fff;}

<table id="test" cellspacing="1">

<tr><th>姓名</th><td>Joy Du</td></tr>

<tr><th>年龄</th><td>26</td></tr>

</table>

/* IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。*/

<object id="flash-show" type="application/x-shockwave-flash" data="*.swf">

<param name="movie" value="*.swf" />

<param name="wmode" value="transparent" />

<img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />

</object>

/* 至于flash的宽高可以在css里设置 */