css3制作导航菜单代码

CSS3是网页设计中必不可少的一部分，它可以轻松的实现各种效果，其中就包括导航菜单。下面我们来学习如何使用CSS3制作一个简单的导航菜单。

/* 创建一个导航菜单容器 */.nav {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
}
/* 设置每个菜单项的样式 */.nav li {
    margin: 0 10px;
    font-size: 16px;
}
/* 鼠标悬浮时改变菜单项样式 */.nav li:hover {
    color: #fff;
    background-color: #333;
}
/* 设置当前激活菜单项的样式 */.nav .active {
    color: #fff;
    background-color: #333;
    padding: 5px 10px;
    border-radius: 5px;
}
    

以上代码将一个ul标签设置成导航菜单容器，使用flex布局使菜单项水平排列，并设置背景颜色和内边距。每个菜单项使用margin间隔开，设置字体大小。在鼠标悬浮时改变菜单项样式，使用“:hover”选择器即可实现。同时，激活状态的菜单项也有自己的样式，使用“.active”类名即可。

以上就是使用CSS3制作导航菜单的基础代码，可以根据需要进行各种样式上的调整，比如修改字体、颜色、背景等。这样一个简单的导航菜单就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！