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訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些