如何像CSDN那样，在窗口最上面显示

zhupeibin 2012-06-05 11:09:59

如何能让菜单顶到窗口的最上面，如CSDN上面显示的登陆、收件箱、空间、帮助、退出等。

...全文

70 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhupeibin 2012-06-17

打赏
举报

6,8楼正解

001007009 2012-06-05

打赏
举报

body p 等标签有默认的margin padding
需要重置下样式
比如



<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="gb2312" />

        <title></title>

        <style>

			body {

				margin:0;

			}

			div {

				border:1px solid red;

			}

        </style>

    </head>

    <body>

        <div>试试</div>

    </body>

</html>

楼主可以搜下 reset css

乌镇程序员 2012-06-05

打赏
举报

body { margin-top:0; padding-top:0 }

001007009 2012-06-05

打赏
举报

body {
margin:0; padding:0;
}

zhupeibin 2012-06-05

打赏
举报

导航容器div作为body元素的第一个子元素，但最上面仍然有一段空白，如何顶到顶，而没这段空白

三石-gary 2012-06-05

打赏
举报

[Quote=引用 2 楼的回复:]

导航容器div作为body元素的第一个子元素就显示在页面顶端了。。
[/Quote]
margin-top:0px;
你可以去看看它的源码。。看看它的css

zhupeibin 2012-06-05

打赏
举报

不是这样的，请看看这个页面最上面显示的：我的：收件箱资源博客空间设置 |帮助| 退出
这段是固定的，但紧顶窗口最上面。在这段上面没有空白区了
谢谢

乌镇程序员 2012-06-05

打赏
举报

导航容器div作为body元素的第一个子元素就显示在页面顶端了。。

001007009 2012-06-05

打赏
举报



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<style>

			body {

				height:2000px;

			}

			div {

				position:absolute; right:40px; top:40px;

				width:90%; height:30px;

				background:#ddd;

			}

		</style>

	</head>

	<body>

		<div id="test">滚动试试</div>

		<script>

			function toolbar(el){

				el = typeof el == 'string' ? document.getElementById(el) : el;

				var elTop = el.offsetTop;

				var sTop = 0;

				window.onscroll = function(){

					sTop = document.body.scrollTop || document.documentElement.scrollTop;

					if( sTop > elTop ){

						el.style.top = sTop + 'px';

					}else{

						el.style.top = elTop + 'px';

					}

				}

			}

			toolbar('test');

		</script>

	</body>

</html>