Css一些技巧【整理】
时间:2011-03-26 来源:linyc
Css固定表格的表头(向下拉滚动条的时候表头固定不动)
.headLock
{
top: expression(this.offsetParent.scrollTop);
position:relative;
}
Css固定表格的左列(向右拉滚动条的时候某列不变)
.leftLock
{
left: expression(this.offsetParent.scrollLeft);
position:relative;
}
//应用的时候将该css加到对应的元素即可
根据层级的关系可以动态地添加offsetParent
如:
this.offsetParent.offsetParent.scrollLeft
this.offsetParent.offsetParent.offsetParent.scrollLeft
Css里加js事件
td
{
background-color:#ffffff;
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
}
Css控制文本超出范围时显示省略号
div {
text-overflow:ellipsis;
width:200px;
white-space:nowrap;
overflow:hidden;
}
<div>这段文本肯定是超出了200px的范围了,如果white-space:nowrap不加上去就没有效果了,因为这样会自动换行;overflow:hidden不加就不能隐藏超过的部分,也没有效果;text-overflow:ellipsis是指省略部分要不要显示省略号text-overflow:clip是不显示</div>