固定导航栏

废话不多说，先看效果再上代码一、效果图

二、html内容

我这里用来外部样式表导入css，当然你可以根据自己的喜好

        
顶部导航栏
内容
底部导航栏

三、CSS部分

可以只引用关键代码，其他的只是为了样式好看。

/* 去除自带的默认内外边距,可以不写 */*,div{margin: 0;padding: 0;}.header{/* 可以不写的 *//* 转换为边框盒子可以不写 */box-sizing: border-box;width: 300px;background-color: skyblue;text-align: center;line-height: 60px;/* 关键代码 *//* 这个变content中的padding-top也得变 */height:60px;/* 顶部固定关键代码,不写就不固定,根据自己需要填写 */position: fixed;top: 0;}.content{/* 可以不写的 */box-sizing: border-box;height: 1000px;/* 这里我多写了100px的宽度，主要是为了演示为什么要加padding */width: 400px;background-color: beige;/* 关键代码 *//* 如果不加,内容就会被导航栏覆盖 */padding-top: 60px;padding-bottom: 50px;}.footer{/* 可以不写 *//* 转换为边框盒子可以不写 */box-sizing: border-box;width: 300px;background-color: aquamarine;text-align: center;line-height: 50px;/* 关键代码 */height:50px;/* 底部固定关键代码 */position: fixed;bottom: 0;}

四、关键点

position:fixed;

这句话会使元素的位置在屏幕滚动时不改变，并固定在每页的固定位置上，除了导航栏，有些侧边广告也是这样