web导航条制作

  1. HTML：用无序列表

导航栏
1. 清除默认样式 list-style: none 去除列表黑点；text-decoration: none 去掉链接下划线；margin/padding:0 清除浏览器自带留白。
  1. 横向布局两种方案

• 弹性布局 display:flex（现代标准，简单稳定，考试优先写）

• 浮动布局 float:left（老式写法，需清除浮动，易塌陷）

  1. 文字垂直居中
    单行文字用 line-height 等于容器高度快速居中

  2. hover交互效果
    :hover 伪类实现鼠标移入变色，导航必备交互

posted @ 2026-07-09 00:02  yangyazhao  阅读(12)  评论(1)    收藏  举报