固定导航栏

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

一、效果图

image

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

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

posted @ 2023-12-07 12:36  芊嵛  阅读(248)  评论(0)  编辑  收藏  举报