css制作导航条
基础导航条结构
使用HTML的<nav>标签和<ul>列表创建导航结构，示例代码如下：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>水平导航条样式
通过CSS将列表项水平排列并添加基础样式：
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #111;
}响应式导航设计
使用媒体查询实现移动端适配：
@media screen and (max-width: 600px) {
nav li {
float: none;
width: 100%;
}
}下拉菜单实现
添加二级菜单交互效果：
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}固定定位导航条
使导航条始终停留在页面顶部：
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
body {
padding-top: 50px; /* 防止内容被导航条遮挡 */
}动画效果增强
添加过渡动画提升用户体验：
nav li a {
transition: background-color 0.3s ease;
}
.active {
background-color: #4CAF50;
}现代Flexbox布局
使用Flexbox实现更灵活的导航布局：
nav ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
