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

html-css08

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

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

只需要给头部设置:

即可。

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

底部和头部分别定义两个div,在利用position:fixed分别设置它们的位置。

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

1、新建一个html页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。