1、图片不存在的时候，显示一个默认图片

 

<img src=”01.jpg” onerror=”this.src=’02.jpg'” />

 

2、CSS强制图片自适应大小

 

img {width:expression(this.width>600?”580px”:this.width+”px”);}

 

/*图片宽度大于600像素都强制显示为580像素宽*/

 

3、默认图片是灰色鼠标放上去变彩色css效果代码

 

a img{filter:gray}

 

a:hover img{filter:}

 

4、css实现图片选中效果

 

.demo{width:114px;height:114px;position:relative;}

 

.demo a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}

 

.demo a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}

 

.demo a span{display:none; text-align:center; font-size:12px;}

 

.demo a:hover span{color:#FFF;display:block;background-color:#333;width:114px;position:absolute;top:94px;left:0px;line-height:20px;}

 

.demoa img{width:100px;height:100px;}

 

<div ><a href=”#” ><span>本期模特【朱茵】</span><img src=”http://www.lanrentuku.com/images/uppic/200812131645360.gif” alt=”” border=”0″ /></a></div>

 

5、从右往左读的文字正写竖排效果

 

.text {layout-flow:vertical-ideographic;height:100px;}

 

6、如何用CSS实现在新窗口打开链接？

 

a:active {test:expression(target=”_blank”);}

 

7、纯CSS制作的新闻网站中的文章列表

 

.list li{

 

width: 100%;

 

}

 

.list li a{

 

color: #777777;

 

display: block;

 

padding: 6px 0px 4px 15px;

 

}

 

.list li span{

 

float: right;/*使span元素浮动到右面*/

 

text-align: right;/*日期右对齐*/

 

}

 

<ul href=”#”>新闻标题01</a></li>

 

<li><span>2007 年12月21日</span><a href=”#”>新闻标题02</a></li>

 

<li><span>2007 年12月21日</span><a href=”#”>新闻标题03</a></li>

 

<li><span>2007 年12月21日</span><a href=”#”>新闻标题04</a></li>

 

</ul>

 

注意:span一定要放在前面,反之会产生换行

 

8、在DIV中图片垂直、水平居中(最简单方法)

 

.demo{

 

text-align: center;

 

width: 150px;

 

height: 150px;

 

border: 1px solid #ccc;

 

}

 

.demo img {

 

margin-top: e-xpression(( 150 – this.height ) / 2);

 

}

 

<div

 

<img src=”http://www.lanrentuku.com/images/uppic/200807160819430.gif” width=”70″ height=”120″ />

 

</div>