WEB前端开发笔试题（1）

浏览数：26 / 时间：2015年06月09日

1.上面两个div在使用纯CSS的情况下，保持在任何尺寸的页面中都横向居中，垂直居中（页面大小不固定）。

<html>

<head>

</html>

2.如何实现一个层在浏览器中垂直左右居中？

让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50% 。

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

3.点击上面的标题区域，拖动移动整个框。

<div id="movediv" style="width:250px;height:200px;border:2px #090 solid; position:absolute;left:400px;top:218px;">
<div id="movespan" style="background:#090;width:220px; height:50px; margin:5px auto;" >标题区!</div>
<div style="background:#999;width:220px;height:130px;margin:5px auto;"></div>
</div>
<script>
var dragdrop={
registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
　var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
　var _hDom=this.get(handler);
　var _tDom=this.get(target);
　_hDom.style.cursor=cursor||"move";
　
　　　 function startDrag(evt){ // 按下鼠标左键时的事件。
　 evt=window.event||evt; // 获取当前事件对象。
　 _IsMousedown=true; // 记录已经准备开始移动了。
　 _ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
　 _ClickTop=evt.clientY-parseInt(_tDom.style.top);
　}
　　　 function doDrag(evt){ // 鼠标开始移动时的事件。
　 evt=window.event||evt; // 获取当前事件对象。
　 if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
　 _tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
　 _tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
　}
　　　 function endDrag(){ // 释放鼠标左键时的事件。
　 if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
　　if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
　　_IsMousedown=false;
　 }
　}
　　　 _hDom.onmousedown=startDrag; // 鼠标按下事件。
　document.onmouseup=endDrag; // 鼠标释放事件。
　document.onmousemove=doDrag; // 鼠标移动事件。
　_tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
},
isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
get:function(element){ // 通过一串字符返回一个对象。
　if(typeof(element) == "string"){
　 return document.getElementById(element);
　}
　return element;
}
};
// 使用方式如下：
dragdrop.registerDragdropHandler("movespan","movediv");
</script>

4.点击下面按钮出现提示框，再次点及其他地方按钮消失。

</head>

<body>

//判断event指向的对象，比如判断元素的ID是否是给出
document.onclick = function (e) {
e =e || event; //e对象存在时回返e,当window.event存在时返回event,如果是IE下的就走 window.event,不是就直接 e=e

var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
var target = e.target || e.srcElement; //e.target 是目标对象,e.event是目标所发生的事件,ie下支持e.srcElement，ff支持e.target,e.target捕获当前事件作用的对象

if (target !== btn && target !== msg) {
msg.style.display = "none";
} else {
msg.style.top = (btn.offsetTop - 160) + "px"; //offsetTop当前对象到其上级层顶部的间隔.
msg.style.left = btn.offsetLeft + "px"; //当前对象到其上级层左边的间隔.
msg.style.display = "block";
}
}
</script>
</body>
</html>

5.如何在DIV层中实现文字的水平垂直居中。

假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：

<div style="width:1000px; height:100px; text-align:center; line-height:100px; border:blue solid 1px;overflow: hidden "> 水平垂直居中

</div> CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。也就是说，如果你的DIV是200PX高，那你就让line-height:200px;文字就会垂直居中了。最后，一定要加overflow: hidden，防止div中的内容溢出。

6.如何让图片在div里左右居中，上下居中

要想让图片左右对齐，我们可以在div里写入"style:text-align:center;"代码来实在div里写入"line-height:300px;vertical-align:middle"，发现IE7这时候也有效果了。但firefox图片还没垂直居中。（这里的"line-height:300px"是根据div的高度确定的。）

再对div增加样式："display:table-cell"，现在看看firefox也好了。

</style>

</head>

<body>

</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

WEB前端开发笔试题（1）