html水平导航栏怎么做
做网站久了，你会发现导航栏这东西，看着简单，真搞起来全是坑。
很多新手小白，上来就抄代码。
结果一粘贴，菜单全挤在一起，或者跑到下面去了。
这时候别慌，咱们一步步来拆解。
今天不整那些虚头巴脑的理论。
直接上干货，教你怎么用最稳妥的方式搞定它。
先说个误区，很多人喜欢用 table 布局。
那是十几年前的老黄历了。
现在用 table 做导航，不仅代码难看，而且对手机适配极差。
搜索引擎也不喜欢。
咱们得用 div 加 css。
这是目前最主流，也是最稳定的做法。
第一步，写 HTML 结构。
别想太复杂，就一个 ul 标签，里面套 li。
这是语义化最好的写法。
代码大概长这样：
简单明了，对吧？
这里要注意，a 标签是行内元素。
如果不加处理，它们会乖乖地排成一行。
但实际项目中，你肯定希望它们之间有间距。
这时候，css 就派上用场了。
第二步，写 CSS 样式。
这里有个关键属性，叫 display。
很多初学者不知道，a 标签默认是 inline。
你要想给它设置宽高，或者加 padding，必须把它变成 block 或者 inline-block。
推荐用 inline-block。
因为它既在一行显示，又能控制间距。
代码如下：
.nav li {
display: inline-block;
margin-right: 20px;
}
这样，每个菜单项之间就有空隙了。
看着清爽多了。
但是，事情没那么简单。
你发现没，有时候 li 之间会有莫名的空隙。
那是换行符在作怪。
解决办法有两个。
一是把 HTML 代码里的换行符去掉，挤在一行写。
二是给父容器 ul 设置 font-size: 0。
然后在 li 里再重新设置 font-size。
我个人喜欢第二种，代码看着整齐点。
第三步，处理 hover 效果。
导航栏没交互，就像人没表情。
加点 hover 效果，用户体验立马提升。
.nav li a:hover {
color: red;
background: #f0f0f0;
}
这就够了。
别搞太花哨的动画，加载慢还容易出 bug。
说到这，你可能问，html水平导航栏怎么做才能自适应？
这就得提到 flex 布局了。
如果你用 flex，代码会更简洁。
.nav {
display: flex;
justify-content: space-between;
}
这样 li 会自动排列，不用管 inline-block 的那些破事。
但是，flex 对老版本浏览器兼容性稍差。
如果你的客户非要用 IE8，那还是老实用 inline-block 吧。
这里插一句，很多教程里说用 float 左浮动。
float 确实也能做，但记得清除浮动。
不然父容器高度塌陷，页面乱成一锅粥。
清除浮动的方法很多，最常用的是 overflow: hidden。
给 ul 加上这个属性，简单粗暴有效。
还有一点，移动端适配。
现在手机流量比电脑还多。
你的水平导航栏，在小屏幕上肯定放不下。
这时候需要媒体查询。
@media screen and (max-width: 768px) {
.nav {
flex-direction: column;
}
}
让导航栏在手机上变成垂直排列。
或者做成汉堡菜单，那个更高级点，但代码量大。
新手建议先做垂直排列，简单稳妥。
最后，检查一下链接。
href 别写错了，# 只是占位符。
上线前，每个链接都要点一遍。
别让客户点进去是个死链，那太丢人了。
其实，html水平导航栏怎么做，核心就两点。
结构语义化，样式模块化。
别为了炫技写复杂的 js。
能用 css 解决的，绝不动 js。
毕竟，js 容易报错，css 相对稳定。
我见过太多人，导航栏做得花里胡哨。
结果点击没反应，或者错位。
客户急得跳脚，你也跟着加班。
何必呢？
稳定，才是硬道理。
记住，代码写得漂亮，不如写得好用。
少即是多，这句话在导航栏设计上特别适用。
留白，呼吸感，比塞满整个屏幕要高级得多。
好了，今天就聊到这。
要是还有哪里不明白，自己多试几次。
编程这东西，手感是练出来的。
别怕报错，报错信息就是老师。
看懂报错，你就进步了。
加油吧，同行们。
