固定导航栏
废话不多说，先看效果再上代码
一、效果图
二、html内容
我这里用来外部样式表导入css，当然你可以根据自己的喜好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<!--导入外部样式表-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
顶部导航栏
</div>
<div class="content">
内容
</div>
<div class="footer">
底部导航栏
</div>
</body>
</html>
三、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;
这句话会使元素的位置在屏幕滚动时不改变，并固定在每页的固定位置上，除了导航栏，有些侧边广告也是这样