前端学习 CSS—导航栏下拉栏

最新推荐文章于 2022-11-30 13:49:05 发布

荏苒相忆

最新推荐文章于 2022-11-30 13:49:05 发布

阅读量1.1k

点赞数 2

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/sinat_36151966/article/details/81544380

版权

本文介绍了前端开发中创建导航栏和下拉菜单的技巧。要点包括：利用list-style-type去除列表样式，通过overflow和float/display实现横向导航栏，使用display属性控制下拉菜单的隐藏与显示，理解相对和绝对定位的区别，以及在CSS伪类选择器中的应用，确保链接样式正确生效。

摘要由CSDN通过智能技术生成

导航栏
1.在使用<li></li>属性时，注意用list-style-type: none;消除列表样式；
2.横向导航栏时，将overflow: hidden;置于<ul></ul>的CSS中，同时可用float或display:inline;横置列表；
3.链接<a></a>中，可以使用display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度；
4.a {text-decoration: none}消去链接下划线；
5. 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

下拉栏
1.display: none;隐藏下拉列表，当鼠标覆盖时（:hover 选择器）display: block;显示；
（注意：display: none;不占用空间，visibility:hidden;占用空间）
隐藏元素的另一方法（手风琴动画效果）：style