HTML中怎样实现一个简易好看的导航栏效果
导读：这篇文章主要给大家介绍“HTML中怎样实现一个简易好看的导航栏效果”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“HTML中怎样实现一个简易好看的导航栏效果”文章能对大家有...
这篇文章主要给大家介绍“HTML中怎样实现一个简易好看的导航栏效果”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“HTML中怎样实现一个简易好看的导航栏效果”文章能对大家有所帮助。
在不久前学习了基础知识（并很快忘记了它们）后，几个月前我开始阅读它。我已经开始制作自己的网页以测试和提高我的技能，但是我在让导航栏正确显示时遇到了问题。
我的导航栏的 HTML
代码如下：
div class="nav">
ul class="nav">
li class="nav">
a class="nav" href="#">
Home/a>
/li>
li class="nav">
a class="nav" href="#">
Coffee/a>
/li>
li class="nav">
a class="nav" href="#">
Food/a>
/li>
li class="nav">
a class="nav" href="#">
Catering/a>
/li>
li class="nav">
a class="nav" href="#">
About/a>
/li>
li class="nav">
a class="nav" href="#">
Contact/a>
/li>
/ul>
/div>
!--Navigation bar.-->
代码运行附原图：
HTML搭导航骨架的效果附代码示例
nav>
ul class="navbar">
li class="nav-item selected">
a href="#">
Home/a>
/li>
li class="nav-item">
a href="#">
Coffee/a>
/li>
li class="nav-item">
a href="#">
Food/a>
/li>
li class="nav-item">
a href="#">
Catering/a>
/li>
li class="nav-item">
a href="#">
About/a>
/li>
li class="nav-item">
a href="#">
Contact/a>
/li>
/ul>
/nav>
style>
nav{
position:fixed;
}
.nav-item{
color: #000;
border: 1px solid blue;
background-color: rgba(255, 255, 255, .6 )
}
.nav-item:hover
{
background-color: rgba(0, 255, 255, .6 )
}
.selected{
color: #058;
border: 1px solid red;
background-color: rgba(255, 0, 255, .6 )
}
代码运行附效果图：
在编写 HTML 代码方面，我是一个绝对的初学者，如果做得不好，我深表歉意。
感谢各位的阅读，以上就是“HTML中怎样实现一个简易好看的导航栏效果”的内容了，通过以上内容的阐述，相信大家对HTML中怎样实现一个简易好看的导航栏效果已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML中怎样实现一个简易好看的导航栏效果
本文地址： https://pptw.com/jishu/654993.html