现在的位置: 首页 > 综合 > 正文

css之图片定位

2013年12月04日 ⁄ 综合 ⁄ 共 1592字 ⁄ 字号 评论关闭

 

我相信这个绝对定位(position: fixed)CSS属性很多人都不陌生,也多应用过,同样我曾也尝试过绝对定位,试验过后发现,它是华丽而不省油,相当消耗计算机内存,特别在我这老机器上运行显然有些吃力,曾看过某些专家们使用华丽而不消耗内存方法,但有些复杂。

但今天我要想大家展示的比较非常规的应用,我相信大家演示后一定会惊叹,一定会记住这个绝对定位应用。

使用了两张透明度的GIF图片作为交叉比较,一个定位一个非定位:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>position-fixed</title> 
<style>
* {
 margin: 0;
 padding: 0;
}

body {
 font-size: 62.5%;
 font-family: Helvetica, sans-serif;
}

p#about {
 position: fixed;
 top: 20px;
 right: 20px;
}

#page-wrap {
 width: 800px;
 background: white;
 margin: 0 auto;
 min-height: 500px;
 height: auto !important;
 height: 500px;
}

#fixed-letters {
 position: fixed;
 top: 200px;
 left: 100px;
 background: url(attachments/month_0904/r2009425232639.gif) white no-repeat;
 width: 800px;
 height: 150px;
}

#scroll-letters {
 position: relative;
 top: 1200px;
 left: 100px;
 background: url(attachments/month_0904/j2009425232654.gif) top center no-repeat;
 width: 800px;
 height: 825px;
}
</style>
</head>

<body>

 <p id="about">by wulinfo: <a href="http://www.52css.com/"><strong>去骂两句</strong></a></p>

 <div id="fixed-letters">
 </div>
 
 <div id="scroll-letters">
 </div>
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8214144-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>

</html>

抱歉!评论已关闭.