CSS和Js演示网页绝对定位与相对定位
CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们。
CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们。
答案:<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>CSS和Js演示网页绝对定位与相对定位</title>
<!-- 通用样式表 -->
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; border-style:none; margin:0px; padding:0px; }
.tools { position:absolute; top:180px; left:10px; }
#abs { position:absolute; left:10px; top:10px; width:150px; height:150px; background-color:buttonface; padding:10px; }
#rel { position:relative; left:170px; top:40px; width:150px; height:120px; background-color:buttonface; padding:10px; }
</style>
<script>
function logEvent(){
$("ipt_x").value = event.x;
$("ipt_y").value = event.y;
$("ipt_x2").value = event.clientX;
$("ipt_y2").value = event.clientY;
}
function $(str){ return(document.getElementById(str)); }
window.onload = function(){
document.onmousemove = logEvent;
}
</script>
</head>
<body>
<div id="abs">绝对定位</div>
<div id="rel">相对定位</div>
<div class="tools">
event.x <input id="ipt_x" size="15" >
event.y <input id="ipt_y" size="15" >
<br/>
event.clientX <input id="ipt_x2" size="9" >
event.clientY <input id="ipt_y2" size="9" >
</div>
</body>
</html>
上一个:CSS美化表格边框为凹陷立体效果的实现方法
下一个:CSS美化的漂亮搜索框