原始檔案
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>頁面內導航範例</title>
<style>
body {
font-family: Arial, sans-serif;
}
/* 固定導航欄 */
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px 0;
text-align: center;
z-index: 1000;
}
.navbar a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.navbar a:hover {
text-decoration: underline;
}
/* 內容區塊 */
.section {
padding: 100px 20px;
margin-top: 60px; /* 為了避免被固定導航欄遮蓋 */
}
#section1 { background-color: #f4f4f4; }
#section2 { background-color: #e4e4e4; }
#section3 { background-color: #d4d4d4; }
</style>
</head>
<body>
<!-- 導航欄 -->
<div class="navbar">
<a href="#section1">部分一</a>
<a href="#section2">部分二</a>
<a href="#section3">部分三</a>
</div>
<!-- 內容部分 -->
<div id="section1" class="section">
<h2>部分一</h2>
<p>這是第一部分的內容。你可以在這裡放置任何你想要展示的資訊。</p>
</div>
<div id="section2" class="section">
<h2>部分二</h2>
<p>這是第二部分的內容。繼續添加更多內容，使頁面更豐富。</p>
</div>
<div id="section3" class="section">
<h2>部分三</h2>
<p>這是第三部分的內容。頁面結束，謝謝你的瀏覽！</p>
</div>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>頁面內導航範例</title> |
| 6 | <style> |
| 7 | body { |
| 8 | font-family: Arial, sans-serif; |
| 9 | } |
| 10 | /* 固定導航欄 */ |
| 11 | .navbar { |
| 12 | position: fixed; |
| 13 | top: 0; |
| 14 | width: 100%; |
| 15 | background-color: #333; |
| 16 | padding: 10px 0; |
| 17 | text-align: center; |
| 18 | z-index: 1000; |
| 19 | } |
| 20 | .navbar a { |
| 21 | color: white; |
| 22 | margin: 0 15px; |
| 23 | text-decoration: none; |
| 24 | font-weight: bold; |
| 25 | } |
| 26 | .navbar a:hover { |
| 27 | text-decoration: underline; |
| 28 | } |
| 29 | /* 內容區塊 */ |
| 30 | .section { |
| 31 | padding: 100px 20px; |
| 32 | margin-top: 60px; /* 為了避免被固定導航欄遮蓋 */ |
| 33 | } |
| 34 | #section1 { background-color: #f4f4f4; } |
| 35 | #section2 { background-color: #e4e4e4; } |
| 36 | #section3 { background-color: #d4d4d4; } |
| 37 | </style> |
| 38 | </head> |
| 39 | <body> |
| 40 | |
| 41 | <!-- 導航欄 --> |
| 42 | <div class="navbar"> |
| 43 | <a href="#section1">部分一</a> |
| 44 | <a href="#section2">部分二</a> |
| 45 | <a href="#section3">部分三</a> |
| 46 | </div> |
| 47 | |
| 48 | <!-- 內容部分 --> |
| 49 | <div id="section1" class="section"> |
| 50 | <h2>部分一</h2> |
| 51 | <p>這是第一部分的內容。你可以在這裡放置任何你想要展示的資訊。</p> |
| 52 | </div> |
| 53 | |
| 54 | <div id="section2" class="section"> |
| 55 | <h2>部分二</h2> |
| 56 | <p>這是第二部分的內容。繼續添加更多內容，使頁面更豐富。</p> |
| 57 | </div> |
| 58 | |
| 59 | <div id="section3" class="section"> |
| 60 | <h2>部分三</h2> |
| 61 | <p>這是第三部分的內容。頁面結束，謝謝你的瀏覽！</p> |
| 62 | </div> |
| 63 | |
| 64 | </body> |
| 65 | </html> |
| 66 |