本文介绍了使用CSS实现鼠标悬停效果的方法，并通过实例展示了如何利用相对定位使元素在不同分辨率下保持固定位置。此外，还简单提及了浮动的概念。
1.CSS写的鼠标悬停
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta name="Author" content="Aultoale" />
<style type="text/css">
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id="tip" href="#">
移到这里试试!
<span id="tip_info">这里是提示信息!</span>
</a>
</body>
</html>
2.CSS相对定位语法
当父对象的position为absolute或者relative的时候
子对像如果设置了position为absolute,则top,left,right,bottom相对于父对象
例子：
<div
<div
<div
</div>
象他这样把容器设置成position:relative
然后盒子position:absolute
这样就能避免容器用绝对位置来定位
例子：如下代码可以让“qiang.gif”这张图片无论在什么样的分辨率下都一直显示在“搜索”这两个字之上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta name="Author" content="Aultoale" />
<style type="text/css">
body {font:normal 12px Verdana}
#top{background:url(bg.jpg); height:20px; width:913px; margin:0 auto; margin-top:10px; padding-top:10px;}
#sou {position:relative;left:200px; font-weight:bold;}
#qiang {display:block; background:url(qiang.gif); height:23px; width:27px;position:absolute;top:-25px;left:0px;}
</style>
</head>
<body>
<div id="top">
<span id="sou">
搜索
<span id="qiang"> </span>
</span>
</div>
</body>
</html>
简单的说到这里，明天我们继续深日探讨一下有趣的浮动
加油！
扫一扫
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
