CSS属性固定页面头部(导航栏)

html-css09

CSS属性固定页面头部(导航栏),第1张

其实用postion: fixed并不是很方便,用position: sticky会更容易达到我们的目的。

只需要给头部设置:

即可。

将position设置为sticky,那么头部组件还会占有着上方空间,所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性,那么body下面的组件也要算出导航栏的长度,再设置top属性,这样一来就麻烦了很多

#maximg

{z-index:999background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0 !important

filter:Alpha(opacity=80)background:#000width:100%height:50pxposition:fixedtop:0

_position:absolute

_background-attachment:fixed

_top:expression(eval(document.documentElement.scrollTop))

_bottom:auto}

可能我误会了你的意思,这样的话你只需把z-index改成正值999就行了,你这负值肯定会在页面下面的。

css定义一条导航栏

首先建立一个DIV,为其命名为“nav”,在DIV中建立一个<ul>无序列表,导航共有几个栏目,就为列表添加几个<li>的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。

然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:

ul {width:宽度值;height:高度值; list-style:none;}

如果是横向导航,还需为里面的列表项<li>标签设置左浮动的样式,代码为:li {float:left}

每个栏目之间分隔的距离可通过margin(外边距)属性来设置。

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html