收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 9666|回复: 6

css顶部固定

[复制链接]
发表于 2012-5-30 23:03:53 | 显示全部楼层 |阅读模式
本帖最后由 zwj1986qs 于 2012-5-30 23:05 编辑

不好插入代码了吗

效果demo
jquery
 楼主| 发表于 2012-5-30 23:04:25 | 显示全部楼层

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  5. <title>jquery博客纯css模拟淘宝详细页面底部固定</title>

  6. <meta name="keywords" content="顶部固定,css模拟" >

  7. <meta name="description" content="jQuery吧,Write Less, Do More,注重前端开发,web前端开发">

  8. <style type="text/css">

  9. /*<![CDATA[*/

  10. body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto;}

  11. #menu {right:0; top:0; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:#ccc;}

  12. * html #menu {position:absolute; right:16px; top:0;}/*only for ie*/

  13. html {overflow:auto !important; overflow:hidden;}



  14. /*]]>*/

  15. </style>

  16. </head>

  17. <!-- -->

  18. <body id="" class="">

  19. <div style="margin:0 auto;text-align:center"><script type="text/javascript">/*DEMO728*90,创建于2012-5-15*/ var cpro_id = 'u897038';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>

  20. <div style="margin:0 auto;text-align:center"><script type="text/javascript">/*468*60,创建于2012-5-7*/ var cpro_id = 'u883919';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>

  21. <h1><a href="http://www.jqueryba.com/" target="_blank" title="jquery,jquery博客,jquery效果,前端开发,web前端,web前端开发,设计,前端资源,html+CSS,JavaScript,html5,css3,浏览器兼容">jQuery吧</a></h1>

  22. <h2><a href="http://www.jqueryba.com/387.html" target="_blank">jquery博客纯css模拟淘宝详细页面底部固定</a></h2>



  23. <div >

  24. <div style=" height:900px;"> </div>

  25. <div id="menu">我顶部固定啦</div>

  26. </div>





  27. <div style="width:100%;height:600px;margin:0 auto"></div>

  28. <script type="text/javascript">/*DEOM120*270,创建于2012-5-12*/ var cpro_id = 'u893319';</script><script src="http://cpro.baidu.com/cpro/ui/f.js" type="text/javascript"></script>        <script type="text/javascript">/*DEMO728*15,创建于2012-5-15*/ var cpro_id = 'u897027';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>



  29. </body>

  30. </html>
复制代码
回复 支持 反对

使用道具 举报

发表于 2012-5-31 08:14:30 | 显示全部楼层
给总容器加个relative
然后顶部容器价格absolute就ok了吧
回复 支持 反对

使用道具 举报

发表于 2012-5-31 09:06:23 | 显示全部楼层
楼上正解!
回复 支持 反对

使用道具 举报

发表于 2012-5-31 10:09:35 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2012-5-31 10:14:46 | 显示全部楼层
position:fixed;top:0;left:0;再hack一下ie6
回复 支持 反对

使用道具 举报

发表于 2012-6-1 13:43:34 | 显示全部楼层
菜鸟改了下,不知道这样合理不  - -

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-9 20:22 , Processed in 0.124685 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表