html使用css制作水平导航栏

108次阅读
没有评论

要制作水平导航栏,可以使用HTML的列表元素(ul)和列表项元素(li),并将它们组合在一起,以形成一个水平的菜单。为了使导航栏看起来更好,我们还需要使用CSS来设置样式。

下面是一个HTML页面的完整示例,其中包含一个水平导航栏。该导航栏包括四个选项:主页、产品、关于和联系。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>水平导航栏</title>
	<style>
		nav {
			background-color: #333;
			overflow: hidden;
		}
		
		nav ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: inline-block;
		}
		
		nav li {
			float: left;
		}
		
		nav a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		
		nav a:hover {
			background-color: #ddd;
			color: black;
		}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
			<li><a href="#">联系</a></li>
		</ul>
	</nav>
</body>
</html>

在上面的示例中,我们创建了一个nav元素,并将其样式设置为具有灰色背景的黑色。ul元素包含四个列表项(li),每个列表项都有一个链接(a标签),指向相应的页面或节。

在CSS中,我们定义了以下样式:

  • nav元素:设置背景颜色为#333,并设置溢出为隐藏。
  • nav ul元素:将列表样式设置为无,将边距和填充设置为0,并将元素设置为内联块。
  • nav li元素:将每个列表项设置为左浮动,以便它们可以在同一行上显示。
  • nav a元素:将链接文本的颜色设置为白色,并将其显示为块级元素。我们还设置了文本的对齐方式,内边距和文本装饰。
  • nav a:hover元素:当用户将鼠标悬停在链接上时,将背景颜色更改为#ddd,并将文本颜色更改为黑色。

当浏览器渲染此页面时,将显示一个水平导航栏,其中包括四个链接,每个链接都在单独的列表项中。当用户将鼠标悬停在链接上时,链接的颜色将更改。

正文完
 
评论(没有评论)