1.通过下面这几行语句可以实现,点击按钮让隐藏框显示,再点击消失:
css: z-index:3;top:230px;left:350px;position:absolute; //让隐藏框悬浮起来,z-index越大,用来控制悬浮在最上面
<input type="button" onClick="show()" value="回复"/>
<div id="backhid" ></div>
<script type="text/javascript"> //用jquery可以写成:$("#backhid").css("display")
function show(){
var value = document.getElementById("backhid").style.display;
if(value=="block")
{
document.getElementById("backhid").style.display="none";
}
else
document.getElementById("backhid").style.display="block";
}
</script>
2.圆角和阴影的实现:
-moz-box-shadow: 3px 3px 2px #888888; /* 老的 Firefox */
box-shadow: 3px 3px 2px #888888;
border-radius:12px;
-moz-border-radius:12px;
3.让背景变透明:
background: rgba(20,20,100,0.5); //参数可以改
4.使悬浮框可以不随着滚动条滚动而滚动:
position: fixed;
opacity: 1;
filter:alpha(opacity=20);
5.让一个固定长度的div或li标签显示数据,多余的数据会表示成...
normal:默认的属性值.(允许内容顶开指定的容器边界).
break-word:内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)
text-overflow:clip | ellipsis (文本溢出)
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时(超过width部分)显示省略标记(...)
white-space: normal | pre | nowrap (内容不换行)
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
当子容器的宽高超出父容器时,父容器就会被撑开来。
要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏。