CSS和Js演示网页绝对定位与相对定位_层和布局特效

CSS和Js演示网页绝对定位与相对定位，这些是我们从事前端编程的基础技能，应该学会的东西，这个小示例会告诉你绝对与相对的区别，以及如何去实现他们。

<html>
<head>
<meta http-equiv="mrc-type" mrc="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>

所属频道：层和布局特效/更新时间：2012-11-09

[收藏][报错][返回列表]

CSS和Js演示网页绝对定位与相对定位_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些