CSS可以轻松地制作出漂亮的导航条,接下来我们来看一下如何实现。
/*首先定义导航条的样式*/ .navbar { background-color: #333; overflow: hidden; } /*定义导航条中每一个选项的样式*/ .navbar a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*当鼠标悬浮在选项上时的样式*/ .navbar a:hover { background-color: #ddd; color: black; } /*指定导航条中的第一个选项的样式(通常会用来表示logo或网站名称)*/ .navbar .logo { font-size: 25px; font-weight: bold; } /*清除浮动*/ .navbar::after { content: ""; clear: both; display: table; } /*使选中的选项颜色与背景色反转*/ .active { background-color: #4CAF50; color: white; }
以上是CSS代码,接下来我们来看一下HTML代码如何结合使用:
<div class="navbar"> <a href="#" class="logo">网站名称</a> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> <a href="#" class="active">选项4</a> </div>
通过上述的HTML和CSS代码可以制作出一条带有logo的导航条和四个选项,当鼠标悬浮在选项上时背景颜色改变,同时,选中的选项颜色与背景色反转。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。