HTML+CSS设计一个简单的水平一级导航栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML+CSS设计一个简单的水平一级导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前面我学习了一段时间的HTML和CSS知识，下面我们来运用知识实现一个简单的水平一级导航栏。

按步骤一步步来：

1 首先我们写出它的HTML部分。

这里是在<div>中使用三个<a>标签，为了方便我没有使用<p>或者<ul>.

2 写出css部分。

           *{
				padding: 0;
				margin: 0;
			}
			#nav{
				width: 300px;
				margin: 100px auto;
				font-size: 0;
			}
			a{
				display: inline-block;
				width: 80px;
				height: 30px;
				font-size: 14px;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
				border-bottom: 1px solid #ccc;
			}
			a:hover{
				color: while;
				background-color:#ccc;
				border: 1px solid;
				border-left-color: orange;
				border-top: orange;
				border-right-color: orange;
			}

(1)首先写*{}里的内容将全局边框设置为0（这是一个需要注意的习惯）

(2)#nav里设置导航栏的宽度以及外边框属性（此处font-size=0是为了防止每个超链接选项出现间隙，你可以删除此项对比效果）
(3)为了能够改变<a>里的高度和宽度，我们首先让display：inline-block；这里是重点，因为<a>属于inline类型不能够改变高度和宽度，只有转换类型为inline-block才能够改变。

(4)设置鼠标放在超链接上的状态，这里就不详细讲解。

完整代码放在下面：（为了方便大家浏览，将css与html代码写在了一起）文章来源地址https://www.toymoban.com/news/detail-517696.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DaoHang</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#nav{
				width: 300px;
				margin: 100px auto;
				font-size: 0;
			}
			a{
				display: inline-block;
				width: 80px;
				height: 30px;
				font-size: 14px;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
				border-bottom: 1px solid #ccc;
			}
			a:hover{
				color: while;
				background-color:#ccc;
				border: 1px solid;
				border-left-color: orange;
				border-top: orange;
				border-right-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<a href="#">唱</a>
			<a href="#">跳</a>
			<a href="#">rap</a>
		</div>
	</body>
</html>

到了这里，关于HTML+CSS设计一个简单的水平一级导航栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！