css导航图 |css网页制作代码

/* 导航样式 */
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e2e2e2;
height: 60px;
padding: 0 30px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}
/* hover样式 */
nav ul li a:hover {
color: #fff;
background-color: #333;
padding: 10px;
border-radius: 5px;
}

以上是一个简单实用的CSS导航图代码示例，其中利用了flex布局来实现导航区域的排版，同时通过hover样式设定鼠标悬停时的交互效果。在实际应用中，大家还可以根据具体的需求对导航框架进行改进和完善，例如添加更多的图标和动态效果，让导航更加美观生动。