文、意如
<html>
<head>
<meta>
<title>簡單導覽列</title>
<style>
/* 整個導覽列容器 */
nav {
background-color: #333; /* 設定背景色為深灰色 */
padding: 10px 20px; /* 上下 10px，左右 20px 的內距 */
}
/* 導覽列中的 ul（選單列表） */
nav ul {
list-style-type: none; /* 移除預設的項目符號（•） */
margin: 0; /* 移除預設的外距 */
padding: 0; /* 移除預設的內距 */
display: flex; /* 使用 flex 排版讓選單橫向排列 */
}
/* 每個 li（選單項目） */
nav li {
margin-right: 20px; /* 每個選單項目之間右側間距 20px */
}
/* 導覽列內的超連結樣式 */
nav a {
text-decoration: none; /* 移除連結的底線 */
color: white; /* 文字顏色為白色 */
font-weight: bold; /* 設定字體為粗體 */
padding: 6px 12px; /* 上下 6px、左右 12px 的內距，讓按鈕更大 */
transition: background-color 0.3s; /* 背景顏色變化加上 0.3 秒動畫過渡 */
}
/* 滑鼠移到超連結時的樣式 */
nav a:hover {
background-color: #555; /* 滑鼠移過時，背景變為較亮的灰色 */
border-radius: 4px; /* 加上 4px 的圓角邊框 */
}
</style>
</head>
<body>
<!-- 導覽列 -->
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我</a></li>
<li><a href="#">作品集</a></li>
<li><a href="#">聯絡我</a></li>
</ul>
</nav>
<!-- 主內容區 -->
<main>
<h1>歡迎來到我的網站！</h1>
<p>這是簡單導覽列的示範。</p>
</main>
</body>
</html>導覽列背景：深色 (#333)
文字顏色：白色，滑過有背景變化
導覽列水平排列：display: flex
無圓點清單：list-style-type: none
Yiru@Studio - 關於我 - 意如