css简单小技巧,很简单,但是你不知道

不要小看了css样式表,前台css样式表写好了,可以节省很多html或js代码,很容易给网页减肥。下面在网上找了一些不错的小技巧,能用的就用吧。

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=http://www.noonenet.cn ><span>No.1网络工作室</span><img src=http://www.noonenet.cn/images/logo.jpg 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;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.noonenet.cn/images/logo.jpg  width="70" height="120″ /></div>