css导航样式源代码

CSS导航样式是网页设计中非常重要的一个部分，可以让网站看起来更加美观、清晰和易读。下面是一些常见的导航样式源代码，供大家参考。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    margin-right: 20px;
}
a {
    display: block;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #666;
}

上面的代码是一个简单的水平导航样式，使用了无序列表（ul）、列表项（li）和超链接（a）等基本的HTML元素。通过CSS设置去掉了列表项前面的默认符号，使用了内联块状元素的display属性让列表项水平排列，并通过设置右侧的margin值来间距开每个列表项。每个超链接都被设置成块级元素，让文本垂直居中，并应用了hover样式来在鼠标移上去时产生视觉效果。

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: #fff;
    padding: 10px;
}
.navbar a {
    color: #fff;
    text-decoration: none;
    margin-right: 20px;
}
.navbar a:hover {
    text-decoration: underline;
}
    

上面的代码是一个使用flex布局的导航样式，可以让导航项自适应宽度，并能实现自动换行。通过设置flex容器（.navbar）的属性，实现了导航项居中排列，并在左右两端设置了较宽的内间距。超链接（a）的样式也相应被设置，使用了无下划线的文字，以及鼠标移过去时会产生下划线的效果。

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