主题:顶级CSS技巧
 楼主 wx951fy 发表于2010年10月10日 上午8:49:19
顶级CSS技巧

让底部DIV始终固定在底部

div { style=”background:#ededed;height:31px;width:100%;position:fixed;left:auto;right:auto;bottom:0;_position:absolute;_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop – this.offsetHeight);text-align:center;”}

 

CSS 等比缩放缩略图 IE6 IE7 FF

.album-pic-list img {

vertical-align: middle;

max-width:100px; /* FF IE7 */

max-height:100px; /* FF IE7 */

_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */

_height:expression(this.height > 100 ? 100 : auto); /* IE6 */

}

 

超长英文单词截断

table-layout:fixed;word-break:break-all;word-wrap:break-word;

 

截字省略号

select {overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;}

 

text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目 前Firefox并不支持。

 

水平线

{border:1px solid #FF99FF;position:relative}(边框设置)

 

垂直滚动条

overflow:auto; overflow-x:hidden;

 

让浏览器窗口永远都不出现滚动条

没有水平滚动条

没有垂直滚动条

没有滚动条

style="overflow:hidden"

 

始终让 Firefox 显示滚动条

程序代码 程序代码

html {overflow:-moz-scrollbars-vertical;}

 

使块元素水平居中

程序代码 程序代码

body, html {min-height:101%;}或者margin:0 auto;

 

隐藏 Exploer textarea 的滚动条

程序代码 程序代码

textarea {overflow:auto;}

 

兼容FF、OPERA透明属性

程序代码 程序代码

filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;

 

 1 qyomea 发表于2010年10月10日 下午6:39:48

 不错,学习了。

 

 2 yaohuad 发表于2010年10月11日 上午10:14:23

好贴!

 3 yeboy88 发表于2010年11月2日 上午10:06:01

感谢楼主分享,收藏了!

 

 

奇新云平台
切换