資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立具有左對齊和右對齊連結的導航欄？
要使用 CSS 建立一個具有左對齊和右對齊連結的導航欄，使用者應該對 CSS 彈性盒佈局 有基本的瞭解。首先，我們將使用 HTML 建立包含五個連結的導航欄結構，然後我們將使用 CSS 設計導航欄並將連結對齊到導航欄的左側和右側，並應用彈性盒佈局屬性以確保連結的正確定位。
我們有一個包含五個連結的導航選單，我們的任務是使用 CSS 建立一個具有左對齊和右對齊連結的導航欄。在本文中，我們將實施以下步驟來使用 CSS 建立具有左對齊和右對齊連結的導航欄
使用 HTML 建立導航選單結構
以下是上述步驟的 HTML 實現
<body> <nav> <div class="left-links"> <a class="links selected" href="/index.htm" target="_blank">Home</a> <a class="links" href="/market/login.jsp" target="_blank"> Login</a> <a class="links" href="/market/index.asp" target="_blank"> Courses</a> </div> <div class="right-links"> <a class="links" href="/about/contact_us.htm" target="_blank"> Contact Us</a> <a class="links" href="/latest/certifications" target="_blank">Certification</a> </div> </nav> <h3> To create a navigation bar with left-aligned and right-aligned links with CSS </h3> <p>Click on the above links to explore our website <span>TutorialsPoint</span>. </p> </body>
使用 CSS 對齊連結
- 我們使用了 nav 類來設計導航欄。我們使用了 display 屬性來應用彈性盒佈局，使用 CSS position 和 top 屬性將導航欄固定在頂部。
- 然後，我們使用 CSS width 設定了尺寸，使導航欄使用整個寬度，並使用 background-color 和 color 屬性設定導航欄的外觀。
- 在下一步中，我們使用了 left-links 類來設定 flex-grow、flex-shrink 和 flex-basis 屬性，使用 flex 簡寫表示法。這將“主頁”、“登入”和“註冊”連結設定為左側，其中左側彈性專案的初始長度設定為 200px。
- 然後，我們為 links 類中的所有連結應用了樣式，其中我們設定了其 font-family、font-size，應用了 padding，使用 text-decoration 去除了連結的下劃線，並使用 text-align 屬性居中對齊。
- 最後，我們設定了懸停時連結的顏色和 span 標籤的文字顏色。
以下是上述步驟的 CSS 實現
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
完整示例程式碼
以下是使用 CSS 建立具有左對齊和右對齊連結的導航欄的完整示例程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
margin: 0px;
margin-top:60px;
}
nav {
display: flex;
position: fixed;
top: 0;
width: 100%;
background-color: #031926;
color: white;
overflow: auto;
height: auto;
}
.left-links {
flex: 1 1 200px;
}
.links {
font-family: Verdana, sans-serif;
display: inline-block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
font-size: 15px;
}
.links:hover {
background-color: #04af2f;
}
span {
color: #04af2f;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links selected" href="/index.htm"
target="_blank">Home</a>
<a class="links" href="/market/login.jsp"
target="_blank"> Login</a>
<a class="links" href="/market/index.asp"
target="_blank"> Courses</a>
</div>
<div class="right-links">
<a class="links" href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
<a class="links" href="/latest/certifications"
target="_blank">Certification</a>
</div>
</nav>
<h3>
To create a navigation bar with left-aligned and
right-aligned links with CSS
</h3>
<p>Click on the above links to explore our website
<span>TutorialsPoint</span>.
</p>
</body>
</html>
結論
在本文中，我們學習並瞭解瞭如何使用 CSS 建立具有左對齊和右對齊連結的導航欄。我們使用 HTML 使用 nav、div 和 anchor 標籤建立導航欄的結構，並應用 CSS 彈性盒佈局 屬性來實現連結的左右對齊。彈性盒佈局使設計具有響應性。
更新於：2024年9月5日
11K+ 瀏覽量
廣告