資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML和CSS建立麵包屑導航
麵包屑導航是一個有用的導航工具，它顯示使用者在網站中的當前位置。它們為使用者提供了一條清晰的路徑，以便輕鬆導航回以前訪問過的頁面，並且它們還有助於搜尋引擎理解網站的結構。
方法一
我們將建立一個水平面包屑導航，它向用戶顯示他們到達當前頁面所走的路徑。
這種型別的導航可以幫助使用者瞭解他們在網站上的位置以及如何導航回之前的頁面。
演算法
定義一個無序列表元素來儲存麵包屑。
為每個麵包屑新增列表項，並將它們包裝在錨標記中以使其可點選。
使用CSS刪除列表中的專案符號，並刪除預設的邊距和填充。
然後，使用Flexbox將列表項水平對齊。
使用邊距屬性在分隔符和麵包屑之間新增空格。
使用顏色屬性更改分隔符的顏色。
使用顏色屬性更改最後一個麵包屑的顏色，並使用pointer-events屬性停用其連結。
使用顏色屬性更改麵包屑連結的顏色，並使用text-decoration屬性刪除下劃線。
使用text-decoration屬性在懸停時為麵包屑連結新增下劃線。
示例
<!DOCTYPE html>
<html>
<head>
<title>Breadcrumbs Example</title>
<!-- Add styling for breadcrumbs -->
<style>
nav ul {
list-style: none; /* Remove bullet points from list */
margin: 0;
padding: 0;
display: flex; /* Use flexbox to align items horizontally */
}
nav li:not(:last-child)::after {
content: "/"; /* Separate the breadcrumbs */
margin: 0 10px; /* Add space between separator and breadcrumb */
color: #999; /* Change separator color */
}
nav li:last-child {
color: #333; /* Change color of last breadcrumb */
pointer-events: none; /* Disable link for last breadcrumb */
}
nav a {
color: #2196e4; /* Change color of breadcrumb links */
text-decoration: none; /* Removes underline */
}
nav a:hover {
text-decoration: underline; /* Add underline to link on hover */
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<!-- Add breadcrumb navigation -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li>Page Name</li>
</ul>
</nav>
</body>
</html>
方法二
在這裡，我們將建立一個垂直面包屑導航，以顯示到達當前頁面所走的路徑。
演算法
定義一個nav元素來儲存麵包屑連結。
使用ul標籤建立一個無序列表。
對於每個麵包屑連結，使用li標籤建立一個列表項。
如果麵包屑連結可點選，則使用錨標記。
如果麵包屑連結不可點選，則在li標籤中使用純文字。
使用CSS樣式來自定義麵包屑連結的外觀，包括顏色、文字修飾和其他所需的樣式。
使用display屬性和flex值來垂直對齊麵包屑連結，並使用flex-direction和column值來垂直堆疊它們。
可選地，使用align-items將連結對齊到nav元素的左側或右側。
示例
<!DOCTYPE html>
<html>
<head>
<title>Vertical Breadcrumb Navigation Example</title>
<style>
/* Style the nav container */
nav {
display: flex;
flex-direction: column; /* Align the links vertically */
align-items: flex-start; /* Align the links to the left */
}
/* Style the unordered list */
nav ul {
list-style: none; /* Remove bullet points */
margin: 0;
padding: 0;
}
/* Add separator between breadcrumb links */
nav li:not(:last-child)::after {
content: ">"; /* Add “>” as separator */
margin: 0 10px; /* Add some margin for spacing */
color: #999; /* Use a light gray color */
}
/* Style the last breadcrumb link */
nav li:last-child {
color: #333; /* Use a dark gray color */
pointer-events: none; /* Disable link behavior */
}
/* Style the breadcrumb links */
nav a {
color: #2196e4; /* Use a blue color */
text-decoration: none; /* Remove underline */
}
/* Style the breadcrumb links on hover */
nav a:hover {
text-decoration: underline; /* Add underline on hover */
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Subcategory</a></li>
<li>Page Name</li>
</ul>
</nav>
</body>
</html>
結論
麵包屑導航常用於電子商務網站，以幫助客戶輕鬆瀏覽產品類別和子類別。它也可用於新聞網站，其中文章按主題和子主題進行分類。它幫助讀者輕鬆導航到同一類別中的相關文章或主題。它們在使用者瀏覽多個頁面或部分的Web應用程式中也很有用。
727 次瀏覽
