div 先浮动,后固定
查看效果: http://www.neixun360.com/eg/eg1/demo.htm
<!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 content="div,先浮动,后固定" name="description">
<meta content="div,先浮动,后固定" name="keywords">
<title>div,先浮动,后固定</title>
<style>
*{margin:0;padding:0;}html,body{_height:100%;_overflow:hidden;}body{_overflow:auto;font-family:Arial,sans-serif;font-size:14px;background:#f4f4f4;color:#333;text-shadow:1px
1px 1px
#fff;}#header{position:fixed;_position:absolute;left:0px;text-align:center;display:block;height:35px;clear:both;background:#000;margin-bottom:30px;border-bottom:7px
solid
#ccc;font-size:14px;line-height:35px;text-align:right;font-style:italic;width:100%;}#header
a{color:#aaa;text-shadow:1px 1px 1px #000;padding:0px
20px;outline:none;}#header a:hover{color:#fff;}#header
a.back{color:#1B80B5;font-weight:bold;display:block;float:right;}#header
a.back:hover{color:#fff;}.left{float:left;}.right{float:right;}h1{font-size:42px;font-family:'Cantarell';font-weight:100;letter-spacing:-1px;}h2{font-size:20px;text-indent:4px;font-weight:normal;font-style:italic;color:#a1a1a1;padding:5px
0px 20px 0px;}h2
span{color:#444;}a{color:#777;text-decoration:none;}a:hover{color:#222;}p{padding:5px
0px;}.content{padding:70px;padding-top:200px;width:80%;margin:0
auto;}#footer{position:fixed;_position:absolute;background:#eee;left:0px;width:100%;height:50px;line-height:50px;bottom:0;background:#f0f0f0;border-top:7px
solid #ccc;text-align:center;text-shadow:1px 1px 1px
#000;color:#fff;background:#000;}
#footer a{color:#aaa;padding:0px 10px;text-shadow:1px 1px 1px
#000;}#footer a:hover{color:#fff;text-shadow:0px 0px 1px
#fff;}#header{top:0;}#wrapper {overflow: hidden;}
#contentn {width:555px; margin-right:10px; float:left;
min-height:1200px;}#sidebar {width:284px; padding:10px; background:
#ccc; float:right; height:400px;}
#portamento_container {float:right; position:relative;} /* take the
positioning of the sidebar, and become the start point for the sidebar
positioning */
#portamento_container #sidebar {float:none; position:absolute;} /* no need to float anymore, become absolutely positoned */
#portamento_container #sidebar.fixed {position:fixed;} /* if the panel is sliding, it needs position:fixed */
</style>
</head>
<body>
<div class="content">
<div id="wrapper">
<div id="contentn">
<h2><a href="http://site518.net/dd/"><b>div,先浮动,后固定</b></a></h2>
<br/><br/>
<p><img src="g.jpg"></p>
<p><img src="n.jpg"></p>
</div>
<div id="sidebar">
<p><img src="360.jpg"></p>
</div>
</div>
</div>
<div id="footer">
</div>
<script src="jquery.min.js"></script>
<script src="portamento.js"></script>
<script>
$('#sidebar').portamento();
</script>
</body>
</html>