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

html-css020

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

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

只需要给头部设置:

即可。

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

在div+css布局中,一般都像下面这样来整体构架的:

<div id="header"></div>

<div id="center"></div>

<div id="footer"></div>

对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏:

<div id="header">

<div id="title">这里是网站的标题</div>

<div id="nav">这里是网站导航栏</div>

</div>

导航栏一般是由多个小块内容组成,选择无序列表

<ul><li></li></ul>

css最好写在head头部里,也可以写在body里,写在头部的好处是先加载css,之后再body内容,不会使内容变形,如果放在body里,尤其放在body底部,那会让加载的内容无样式,等待css加载才显示样式,很不美观。