社群學習工具庫休閒

繁体中文

首頁 > web前端 > html教學 > 主體

如何透過html製作導航條

迷茫

發布： 2017-03-25 15:26:46

原創

6179 人瀏覽過

今天分享簡單導覽列的製作方法：

第一步：引入css樣式表，新建一個id為nav的層，使用

、標籤來製作完成效果。

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body></html>

登入後複製

第二步驟設定CSS樣式：

1.設定nav的屬性

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

登入後複製

展示效果如下所示：

　　

2.清除

標籤前面自帶的點

#nav ul{
	list-style: none;
}

登入後複製

3.設定

標籤的屬性

#nav ul li a{
	width: 98px;
	height: 50px;
	float: left;
	border: 1px solid red;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

登入後複製

4.設定滑鼠滑過效果

#nav ul li a:hover{
	background-color: #ABCDEF;
}

登入後複製

最終效果：

#完整HTML程式碼部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
	</head>
	<body>
		<p id="nav">
			<ul>
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
				
				<li><a href="">首页</a></li>
			</ul>
		</p>
	</body>
</html>

登入後複製

完成CSS樣式程式碼部分：

*{
	margin: 0;
	padding: 0;
}
#nav{
	width: 500px;
	height: 50px;
	border: 1px solid red;
	margin: 30px;
}

#nav ul{
	list-style: none;
}
#nav ul li a{
	width: 98px;
	height: 50px;
	float: left;
	border: 1px solid red;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
}

#nav ul li a:hover{
	background-color: #ABCDEF;
}

登入後複製

以上是如何透過html製作導航條的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

html，导航，一级导航

來源：php.cn

上一篇：html表單知識大全下一篇：行內元素，塊級元素與空元素的差異詳解

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

mysql執行函數mysql_query()的定義與用法範例

1970-01-01 08:00:00
php連接mysql資料庫詳細步驟（圖文）

1970-01-01 08:00:00
sql資料庫的增刪改圖文教學（phpMyAdmin使用教學）

1970-01-01 08:00:00
sql資料庫匯入匯出步驟教學（圖）

1970-01-01 08:00:00
sql資料表的可視化增刪改教學（phpMyAdmin使用教學）

1970-01-01 08:00:00
SQL語句進行資料表的增刪改查教學（phpMyAdmin使用教學）

1970-01-01 08:00:00
Java多執行緒基礎詳解

1970-01-01 08:00:00
php中文件上傳圖片

2023-03-06 22:20:01
對JS關於物件創建的幾種方式總結

1970-01-01 08:00:00
深入理解Js中的this關鍵字

1970-01-01 08:00:00

最新問題

在行動視圖中，當使用者點擊連結時，如何關閉此導覽列？當使用者點擊連結瀏覽網站時，導覽列沒有關閉？我曾嘗試向每個連結新增點擊事件偵聽器以關閉導覽欄，但它不起作用！此外，處於活動位置（即X）的hamberberger選單圖示也沒有很好地...

來自於 2024-04-06 19:23:03

0

1

411

為什麼我的 hr 標籤設定為白色純色時是半透明的？我有一個html（帶有引導程式）和一個CSS，在我的html中我有一個<hr>標籤，它有一個類，然後在我的CSS中我有它的邊框樣式。它是半透明的，你可以看到白色，但它不...

來自於 2024-04-06 16:13:26

0

1

500

顯示隱藏的側邊面板：選中我希望在側面板中有一個導航選單，可以透過動畫漢堡選單切換到視圖。我想僅使用CSS創建它，而不使用任何JS。 :checked偽類似乎是可行的方法，但我無法讓它工作。到目前為止我擁有...

來自於 2024-04-06 15:49:33

0

1

319

導覽列上的CSS底部邊框我有一個導航欄，當懸停列表中的任何項目時，我在底部添加了一條紅線，但我想將該紅線移到標題下方（例如“服務”），知道如何實現此目的？我在codepen中新增了一個小範例，以便您可以輕...

來自於 2024-04-06 15:04:41

0

2

347

有沒有辦法在vue中設定route prop？我想要導航到頁面中的特定選項卡this.$router.push({name:"AdminNotifications",params:{tab:"re...

來自於 2024-04-06 11:35:59

0

1

456

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1417463
php入門教程之一週學會PHP

4258652
JAVA 初級入門影片教學

2481885
小甲魚零基礎入門學習Python影片教學

504156
PHP 零基礎入門教學

844498

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板