1.如何让网页水平居中显示?
设置body的margin属性为auto,并设置body的宽度:
body{ margin:auto;width:1000px;}
2.如何让两个或多个div并排显示?
设置要并排显示的div的样式的display为inline:
<div style="float:left;;">左</div>
<div style="float:left;;">右</div>
3.弹出层之后背景变灰,并且不可操作。
在body下放置一div,作为遮罩层。当弹出层之后,给遮罩层添加样式:
/*设置遮罩层的样式*/
.bgGray{ position:absolute; background-color:#fff; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; top:0px;left:0px;width:100%; height:100%;}
4.可拖动弹出层。
定义一个拖动状态_move,默认为false,当mousedown时将该状态设置为true,mouseup时设置为false。使用document的onmousemove方法,当_move为true时,根据鼠标坐标设置弹出层的新坐标。简单实现如下:
$("#title").mousedown(function (e) {
_move = true;
//计算鼠标与弹出层的坐标差值
_x = e.clientX - $(this).offset().left;
_y = e.clientY - $(this).offset().top;
});
$("#title").mouseup(function (e) {
_move = false;
});
//调用此方法,若_move为true则设置弹出层的位置
document.onmousemove = function (e) {
if (_move) {
var x = e.clientX - _x;
var y = e.clientY - _y;
$("#title").css({ "left": x + "px", "top": y + "px" });
}
};
<body>
<div id="title" style="width:300px;height:200px:background-color:Grat;"></div>
</body>
5.div中文本不可选中。
设置div的-moz-user-select属性为none:
<div id="title" style="-moz-user-select: none;"></div>