Register
> 博客>

导航条html代码

新星源码网 2月 12日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar</title>
    <style>
        /* CSS样式可以在这里定义，也可以放在外部样式表中 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        nav {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
        }
        nav ul li a:hover {
            color: #ccc;
        }
    </style>
</head>
<body>

<nav>
    <ul>
        <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>
</nav>

</body>
</html>

这段代码创建了一个简单的导航条，包括四个链接：Home、About、Services 和 Contact。CSS 样式用于定义导航条的外观和行为，其中包括背景颜色、字体样式、链接的样式等。

如果要响应式设计：使导航条在不同设备上具有良好的显示效果。下拉菜单：在某些导航项上添加下拉菜单，以提供更多选项。活动状态：突出显示当前所在页面的导航项。图标：为导航项添加图标，使其更具吸引力。

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Improved Navigation Bar</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: #fff;
padding: 10px 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
}
nav ul li a:hover {
background-color: #555;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #555;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li class="dropdown">
<a href="#">Products</a>
<div class="dropdown-content">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

在这个示例中，我们增加了一个下拉菜单，用于显示产品选项。同时，添加了一些简单的样式来处理下拉菜单的显示和链接的悬停状态。你可以根据需求

Related

热门文章

微海报