固定导航栏

废话不多说,先看效果再上代码

一、效果图

二、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;

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

热门相关:染指帝国首席:老公,别闹   宝贝迷人,总裁圈住爱   豪门隐婚:老婆别闹了   傲娇驾到,总裁别闹   婚期一年