資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 設定導航欄邊框
使用 CSS 在導航欄周圍設定邊框是一項簡單的任務，可以使用 CSS 屬性輕鬆實現。在本文中，我們將學習和理解三種不同的方法來使用 CSS 設定導航欄周圍的邊框。
我們的 HTML 文件中有一個包含四個連結的導航欄，我們的任務是使用 CSS 設定導航欄周圍的邊框。
設定導航欄邊框的方法
以下是本文將討論的使用 CSS 設定導航欄周圍邊框的方法列表，其中包括分步說明和完整的示例程式碼。
使用 border 屬性設定邊框
為了使用 CSS 設定導航欄周圍的邊框，我們將使用 CSS border 屬性，這是一個 border-width、border-style 和 border-color 的簡寫屬性，它可以為任何元素設定邊框。
- 為了建立導航欄，我們使用了帶有類 navbar 的 div 容器來組合使用 anchor 標籤建立的所有連結。
- 為了設計導航欄，我們使用了 navbar 類，它設定了導航欄的 寬度、內邊距 和 文字對齊方式。
- 然後，我們使用 a 元素 選擇器 為所有連結應用樣式，我們設定了它的 字體系列、字型大小，應用了 內邊距，使用 text-decoration 去除了連結的下劃線，設定了文字 顏色 和 外邊距。
- 我們使用了 :hover 偽類來更改滑鼠懸停在連結上時的 背景顏色 和文字顏色。
- 最後，我們使用了 "border: 2px solid #031926;" 和 border 類，它在導航欄周圍設定了一個 2px 的實線邊框。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS border 屬性設定導航欄周圍的邊框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.border {
border: 2px solid #031926;
}
</style>
</head>
<body>
<div class="navbar border">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>border
</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
使用 outline 屬性設定邊框
在本文中，為了使用 CSS 設定導航欄周圍的邊框，我們將使用 CSS outline 屬性，該屬性繪製在任何元素邊框的外部。
- 為了建立和設計導航欄，我們使用了與第一種方法類似的方法。
- 然後，我們使用了 "outline: 2px solid #031926;" 和 outline 類，它在導航欄周圍設定了一個 2px 的實線邊框。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS outline 屬性設定導航欄周圍的邊框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.outline {
outline: 2px solid #031926;
}
</style>
</head>
<body>
<div class="navbar outline">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>outline
</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
使用 box-shadow 屬性設定邊框
在本文中，我們將使用 CSS box-shadow 屬性使用 CSS 設定導航欄周圍的邊框，它會在任何元素周圍新增陰影效果。在這裡，我們將使用 box-shadow 屬性在導航欄周圍新增邊框。
- 為了建立和設計導航欄，我們使用了與第一種方法類似的方法。
- 然後，我們使用了 "box-shadow: 0 0 0 2px #031926;" 和 outline 類，其中前三個 0 代表水平偏移量、垂直偏移量和模糊半徑，2px 設定導航欄周圍的邊框，代表擴充套件半徑。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS box-shadow 屬性設定導航欄周圍的邊框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.shadow {
box-shadow: 0 0 0 2px #031926;
}
</style>
</head>
<body>
<div class="navbar shadow">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>box-
shadow</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 設定導航欄周圍的邊框。我們討論了三種不同的方法：使用 CSS border() 屬性、outline 屬性和 box-shadow 屬性。使用者可以使用任何方法使用 CSS 設定導航欄周圍的邊框。
更新於：2024年9月12日
8K+ 瀏覽量
廣告