css3 手写nav导航条（互相学习）
以下是一个简单的CSS3样式的导航条示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Navigation Bar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
overflow: hidden;
}
.nav li {
float: left;
position: relative;
text-align: center;
}
.nav li a {
display: block;
padding: 10px 20px;
color: white;
text-decoration: none;
transition: background-color 0.3s ease;
}
.nav li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>这段代码创建了一个基础的水平导航条，使用了CSS3的特性，如transition来实现导航栏链接的悬停效果的平滑过渡。这个示例简单明了，并且可以作为学习如何创建自定义导航条的起点。
评论已关闭