前端小案例——动态导航栏文字（HTML + CSS）
以下是实现动态导航栏的HTML和CSS代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Navigation Bar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.nav {
background-color: #333;
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="nav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<h2 id="home">Home</h2>
<p>Welcome to my home page.</p>
<h2 id="news">News</h2>
<p>Some news this is place holder text only.</p>
<h2 id="contact">Contact</h2>
<p>You can reach me via email at example@example.com.</p>
<h2 id="about">About</h2>
<p>Some information about me and my website.</p>
</body>
</html>这段代码创建了一个基本的动态导航栏，当用户将鼠标悬停在导航链接上时，会出现悬浮效果。同时，每个链接指向页面中的一个特定部分，使得用户可以快速浏览页面的不同部分。
评论已关闭