)來指向各自的頁面。 下面是一個基本的HTML結構範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>登入後複製
- CSS樣式
接下來，我們需要使用CSS來為導覽列新增樣式，使其呈現出響應式佈局。首先，我們需要為導覽列添加一定的背景顏色、內邊距和邊框等。然後，我們可以使用CSS的浮動或彈性佈局來實現選單選項在導覽列中自動調整位置。
下面是一個基本的CSS樣式範例：
nav {
background-color: #333;
padding: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 15px;
}
a {
color: #fff;
text-decoration: none;
}登入後複製
- 響應式佈局
為了實現導覽列在不同裝置上的適應性，我們需要使用媒體查詢來設定不同的CSS樣式。例如，在較小螢幕上，我們可以將選單選項設定為垂直佈局，並且在顯示時自動隱藏或折疊。
下面是一個基本的響應式佈局範例：
@media screen and (max-width: 600px) {
ul {
display: none;
}
li {
display: block;
margin-bottom: 10px;
}
nav {
background-color: #333;
padding: 10px;
height: 50px;
}
/* 在较小屏幕上显示一个菜单图标，并在点击时显示/隐藏菜单选项 */
.menu-icon {
display: inline-block;
color: #fff;
float: right;
margin-top: 15px;
margin-right: 15px;
cursor: pointer;
}
/* 响应式菜单隐藏时，点击菜单图标显示菜单选项 */
#menu-toggle:checked ~ ul {
display: block;
}
}登入後複製
注意，我們在CSS中使用了媒體查詢(@media)來設定響應式佈局。透過設定不同的螢幕尺寸條件和對應的CSS樣式，我們可以實現導覽列在不同裝置上的自適應佈局。
綜上所述，使用HTML和CSS可以實現一個響應式的導航框架佈局。 HTML用於建立基本的導覽列結構，CSS用於設定導覽列的樣式和佈局。透過使用媒體查詢，我們可以實現導航列在不同裝置上的自適應性。希望這篇文章能對你有所幫助，並能成功實現一個漂亮的響應式導航框架佈局！
