HTML和CSS是網頁設計和開發的基礎，而懸浮導航則是網站設計中非常重要的一個元素。懸浮導航可以方便用戶快速瀏覽和訪問網站的不同部分，增強用戶體驗。下面，我們來看一下如何使用HTML和CSS來創建一個簡單的懸浮導航。
<nav class="navbar"> <ul class="navlinks"> <li class="navitem"><a href="#">首頁</a></li> <li class="navitem"><a href="#about">關于我們</a></li> <li class="navitem"><a href="#services">我們的服務</a></li> <li class="navitem"><a href="#contact">聯系我們</a></li> </ul> </nav>
上面的代碼創建了一個導航菜單，其中包含四個鏈接。我們使用
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
}
.navlinks {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.navitem {
margin: 0 10px;
}
.navitem a {
text-decoration: none;
color: #fff;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
.navitem a:hover {
background-color: #fff;
color: #333;
}上面的CSS代碼定義了導航條的樣式。我們使用position:fixed來將導航欄固定在頁面的頂部，然后使用justify-content:center將鏈接水平居中。我們還將列表樣式設置為none并添加了一些內邊距和外邊距以及邊框效果。當鼠標懸停在鏈接上時，我們將其背景顏色設置為白色，字體顏色為黑色。
通過以上代碼示例，我們可以很容易地創建一個簡單的懸浮導航，增強了網站的易用性與美觀性。
上一篇css應用導航代碼
下一篇html+css項目