CSS3面包屑導航是一種常見的網頁導航欄形式,通常用于顯示當前頁面所在位置以及頁面的上級位置。相比與傳統的文本鏈接導航,面包屑導航更加直觀簡潔,提高了網站的用戶友好性。
/* CSS3面包屑導航樣式示例 */ .breadcrumb { list-style: none; /* 不顯示列表符號 */ margin: 0; padding: 0; background-color: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); display: flex; flex-wrap: wrap; } /* 面包屑導航項樣式 */ .breadcrumb-item { display: flex; align-items: center; padding: .5rem 1rem; text-decoration: none; color: #777; font-size: .875rem; font-weight: 400; text-shadow: 0 1px 0 #fff; border-right: 1px solid #bbb; } .breadcrumb-item:hover, .breadcrumb-item:focus { color: #333; background-color: #eee; } .breadcrumb-item:last-child { border-right: none; color: #333; } /* 活動面包屑導航項樣式 */ .breadcrumb-item.active { color: #555; text-shadow: 0 1px 0 #fff; } .breadcrumb-item.active:hover, .breadcrumb-item.active:focus { background-color: transparent; color: #555; }
面包屑導航通常由多個鏈接組成,每個鏈接表示當前頁面所在的層級。使用CSS3的flex布局可以很好的組織這些鏈接,使其在不同的屏幕尺寸下都可以自適應顯示。
除此之外,CSS3還提供了多種樣式效果,例如鼠標懸停、活動狀態等,增強了面包屑導航的交互效果。
總之,CSS3的面包屑導航可以為網站提供簡潔而有效的導航方式,提高用戶的使用體驗。