当前位置:编程学习 > 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美化的漂亮搜索框

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,