PC--CSS技巧

　　

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>