廢話不多說，先看效果再上代碼 一、效果圖 二、html內容 我這裡用來外部樣式表導入css，當然你可以根據自己的喜好 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>導航欄</title> <!--導入外部樣式表--> <l ...
廢話不多說，先看效果再上代碼
一、效果圖
二、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;
這句話會使元素的位置在屏幕滾動時不改變，並固定在每頁的固定位置上，除了導航欄，有些側邊廣告也是這樣
