資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用CSS建立具有三種不同對齊方式的導航欄
在HTML中，導航欄是一組按鈕和影像，它們排列成一行或一列，用作連結特定網頁的控制站點。它被認為是網頁設計中使用的基本工具之一。在不影響頁面內容的情況下，HTML導航欄將結構與內容分離，併為網站佈局增添創意。
我們使用HTML建立導航欄，CSS使其外觀精美。可以使用JavaScript新增其他功能。在HTML中，導航欄可以透過多種方式實現，包括水平、垂直、固定、動態、側邊欄等。讓我們深入瞭解這篇文章，學習如何使用CSS建立導航欄。
左對齊導航欄
在左對齊的導航欄中，影像位於導航欄的左側，而整個連結列表位於右側。
示例
讓我們來看下面的例子，我們將建立一個左對齊的導航欄。
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: #D5F5E3;
}
header img {
height: 60px;
cursor: pointer;
}
li,
a,
button {
font-family: verdana;
font-weight: 200;
font-size: 13px;
color: #DE3163;
text-decoration: none;
}
header {
display: flex;
align-items: center;
padding: 15px 12%;
}
.navigate_links li {
display: inline-block;
padding: 6px 15px;
}
.navigate_links li a:hover {
color: #1C2833;
border: 1px solid #6C3483;
box-shadow: 3px 3px 3px red, 3px 3px 3px #AED6F1;
border-radius: 8px;
margin: 10px;
padding: 12px;
}
button {
margin-left: 15px;
padding: 10px 10px;
border-radius: 16px;
background-color: #F4F6F7;
color: #1C2833;
border: none;
cursor: pointer;
}
button:hover {
background-color: #ABEBC6;
color: black;
}
</style>
</head>
<body>
<header>
<img src="https://tutorialspoint.tw/cg/images/logo.png" alt="LOGO">
<nav>
<ul class="navigate_links">
<li>
<a href="#">Primepacks</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">Ebook</a>
</li>
<li>
<a href="#">Library</a>
</li>
</ul>
</nav>
<a href="#">
<button>Login</button>
</a>
</header>
</body>
</html>
執行上面的程式碼後，它將生成一個輸出，在網頁上顯示左對齊的導航欄，其中影像位於左側，所有連結頁面位於右側。
垂直對齊導航欄
HTML和CSS中的垂直導航欄是使用Nav標籤構建的。HTML5添加了<nav>標籤，它專門用於導航。您可以使用<nav>標籤建立導航欄，並使用CSS對其進行樣式設定。
示例
這是一個使用HTML和CSS中的Nav標籤建立垂直導航欄的示例。
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</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懸停。
居中對齊導航欄
在居中對齊的導航欄中，所有連結頁面都將顯示在網頁的中心。
示例
考慮下面的例子，我們將建立在網頁上居中對齊的導航欄。
<!DOCTYPE html>
<html>
<head>
<style>
#nav {
position: absolute;
left: 0px;
height: 35px;
background-color: #ABEBC6;
width: 100%;
}
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
padding: 9px 12px;
display: block;
color: #DE3163;
text-align: center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses</a>
</li>
<li>
<a href="#">PrimePacks</a>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</div>
</body>
</html>
執行上面的程式碼後，它將生成一個輸出，其中包含顯示在網頁上的居中對齊的導航欄，所有連結的網頁都顯示在中心。
更新於：2024年1月22日
268 次瀏覽
廣告