html使用css制作垂直导航栏

94次阅读
没有评论

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>垂直导航栏</title>
	<style>
		nav {
			background-color: #333;
			padding: 20px;
			width: 200px;
		}
		
		nav ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		nav li {
			margin-bottom: 10px;
		}
		
		nav a {
			display: block;
			color: white;
			padding: 10px;
			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,添加填充以使其看起来更美观,并将其宽度设置为200像素。
  • nav ul元素:将列表样式设置为无,将边距和填充设置为0。
  • nav li元素:将每个列表项的底部边距设置为10像素,以便它们之间有一些间隔。
  • nav a元素:将链接文本的颜色设置为白色,并将其显示为块级元素。我们还设置了文本的内边距,以使其看起来更美观,并去掉了文本的下划线。
  • nav a:hover元素:当用户将鼠标悬停在链接上时,将背景颜色更改为#ddd,并将文本颜色更改为黑色。

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

正文完
 
评论(没有评论)