首頁 > 文章 > web前端 > 如何透過html製作導航條

如何透過html製作導航條

迷茫原創: 2017-03-25 15:26:466175瀏覽

<!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.清除ff6d136ddc5fdfeffaf53ff6ee95f185標籤前面自帶的點

#nav ul{
	list-style: none;
}

3.設定ff6d136ddc5fdfeffaf53ff6ee95f185下包含的3499910bf9dac5ae3c52d5ede7383485標籤的屬性

#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中文網其他相關文章！

陳述：

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

上一篇：html表單知識大全下一篇：html表單知識大全

看更多