固定顶部导航栏

</pre><pre name="code" class="html"><style type='text/css'>
.topNav{

/* 对于其他浏览器 */
<code class="keyword">position</code><code class="plain">: </code><code class="value">fixed</code><code class="plain">;</code>/* 固定位置 ie6不支持该属性 */
top:0px;

/* 对于 IE6 */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop) + "px");
/*采用以上代码,拉动垂直滚动条时,这个导航条有跳动现象,解决此问题的方法是使用“background-attachment:fixed”为body添加一个背景图片,
强制页面在重画之前先处理CSS,而且这个图片可以是虚拟的,比如“background:url(任意名称)”。*/<pre name="code" class="sh_css sh_sourceCode" style="margin: 8px; padding: 3px; width: 600px; background-color: rgb(255, 255, 255); border-width: 1px 1px 1px 5px; border-style: dashed dashed dashed solid; border-color: rgb(187, 187, 187); color: rgb(0, 0, 0); font-family: Consolas, Monaco, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; white-space: pre-wrap; word-wrap: break-word; line-height: 22px; orphans: 2; text-align: -webkit-auto; widows: 2;">body <span class="sh_cbracket" style="margin: 0px; padding: 0px;">{</span><span class="sh_property" style="color:#a52a2a;margin: 0px; padding: 0px;">background:</span> <span class="sh_value" style="color:#ff0ff;margin: 0px; padding: 0px;">url</span>(<span class="sh_property" style="color:#a52a2a;margin: 0px; padding: 0px;">about:</span><span class="sh_value" style="color:#ff0ff;margin: 0px; padding: 0px;">blank</span>); <span class="sh_property" style="color:#a52a2a;margin: 0px; padding: 0px;">background-attachment:</span> <span class="sh_value" style="color:#ff0ff;margin: 0px; padding: 0px;">fixed</span>;<span class="sh_cbracket" style="margin: 0px; padding: 0px;">}</span>

z-index : 999 ;
width:100%;
text-align:center;
overflow:hidden;
}

mainBody{
/*解决正文被顶部导航栏盖住的现象*/
margin-top:100px;
}
</style>
<div class='topNav'>固定的顶部导航栏</div><div class='mainBody'></div>
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值