利用HTML和CSS实现简易导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易导航栏</title>
<style>
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.navbar li {
float: left;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul class="navbar">
<li><a class="active" href="home.html">首页</a></li>
<li><a href="news.html">新闻</a></li>
<li><a href="contact.html">联系</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</body>
</html>这段代码展示了如何使用HTML和CSS创建一个简单的水平导航栏。导航栏具有背景颜色、无边框、圆角边框以及在鼠标悬停时的背景变化效果。这是学习Web开发的一个基本示例，适合初学者学习和模仿。
评论已关闭