`
jjklmm
  • 浏览: 55474 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div 先浮动，后固定

jquerydiv 
阅读更多

查看效果： 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>

 

查看效果： http://www.neixun360.com/eg/eg1/demo.htm

0
顶
7
踩
分享到：
| JQuery全屏浮动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics