資料結構
網路
關係資料庫管理系統 (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容器來組合使用錨點標籤建立的所有連結。
- 為了設計導航欄，我們使用了**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+ 瀏覽量
廣告