David's Blog

1、一个兼容性调整(IE和Mozilla)的笨办法：
初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
临时解决方法：选择符{属性名:B !important;属性名:A}

2、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding

3、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

4、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。

5、li标签前面的图标推荐使用background-image，而不是list-style-image。

6、IE分不清继承关系和父子关系的差别，全部都是继承关系。

7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

10、与内容无关的图片请使用background

11、定义颜色可以缩写#8899FF=#89F

12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

»阅读全部

阴影效果

通过使用带有一些padding之的背景图来添加阴影效果。

效果预览

HTML

<img class=”shadow” src=”sample.jpg” alt=”” />

CSS

img.shadow {
            background: url(shadow-1000×1000.gif) no-repeat right bottom;
            padding: 5px 10px 10px 5px;
}

双边框效果

这应该是目前最常见的技巧，我们通过以下方式创建说边框。

效果预览

HTML

<img src="sample.jpg" alt="" />

CSS

img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

图片外框效果

webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。

效果预览

HTML

<div>
	<span>&nbsp;</span>
	<img src="sample.jpg" alt="" />
</div>

CSS

.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

水印效果

你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印

效果预览

HTML

<div>
	<img src="sample.jpg" alt="" />
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	filter:alpha(opacity=75);
	opacity:.75;
}

为图片添加说明文字

使用绝对定位和透明度的设置来添加灵活的说明。

效果预览

HTML

<div>
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}