固定导航栏

  • 固定导航栏已关闭评论
  • 61 次浏览
  • A+
所属分类:Web前端
摘要

我这里用来外部样式表导入css,当然你可以根据自己的喜好可以只引用关键代码,其他的只是为了样式好看。


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

一、效果图

固定导航栏

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

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