css怎么做导航栏?

有时候我们使用css制作页面的时候,想做页面的导航栏,那么css怎么做导航栏?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css怎么做导航栏?

在html页面body里面编写导航栏内容,可以看到是通过<ul><li><a href=""></a></li></ul>的格式来实现导航栏,完整代码如下图所示:

1.png

在head部分,编写css样式, list-style-type: none;是除掉导航前面默认带的点,li ali a.activeli a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化,如下图所示:

2.png

在浏览器中打开页面,可以看到已经制作成了一个比较美观的垂直导航栏,如下图所示:

3.png

我们将鼠标滑向垂直导航栏的列表项上,可以看到列表项颜色发生变化,如下图所示:

4.png

我们也可以制作成水平导航栏,overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏,float: left;使导航栏水平显示,完整代码如下图所示:

5.png

在浏览器中打开页面,可以看到制作出美观的水平导航栏,如下图所示:

6.png

更多web前端工程师相关知识,请查阅 HTML中文网 !!

以上就是css怎么做导航栏?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏