实用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>
免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:13770178@qq.com
苏汐儿主页 » 实用css小技巧

发表评论