資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立底部導航選單？
要建立底部導航選單，請使用`bottom`和`position`屬性設定`nav`元素。將`position`屬性設定為`fixed`，`bottom`屬性設定為`0px`。底部導航選單在網頁上的顯示如下所示。選單固定在底部，如下所示：
建立導航選單
首先，設定包含一些選單項的導航選單：
<nav> <a class="links selected" href="#"> Home</a> <a class="links" href="#"> Login</a> <a class="links" href="#"> Register</a> <a class="links" href="#"> Contact Us</a> <a class="links" href="#">More Info</a> </nav>
設定導航選單樣式
使用`bottom`和`position` CSS屬性設定導航選單樣式，使其顯示在底部：
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
設定菜單鏈接樣式
菜單鏈接使用`display`屬性設定為`inline-block`。它將元素顯示為內聯塊級容器。其餘連結文字使用`text-decoration`、`font-size`和`color`屬性設定樣式：
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
連結懸停顏色
使用`:hover`選擇器設定連結懸停樣式：
.links:hover {
background-color: rgb(100, 100, 100);
}
設定預設選中連結的樣式
預設選中的連結也進行了樣式設定。這裡是“主頁”：
.selected{
background-color: rgb(0, 18, 43);
}
建立底部導航選單
示例
讓我們看看如何建立一個底部導航選單：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h2>Bottom navigation menu</h2>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>
更新於：2023年10月27日
瀏覽量：1000+
廣告