DIV+CSS导航栏布局实战，横向导航
一、网页导航栏的标准结构与设计规范
导航栏是网页的核心功能模块，相当于网站的目录，用户通过导航栏访问网站各个页面，是所有网站必备的模块，DIV+CSS制作的导航栏，样式灵活、兼容性好、交互效果丰富，支持鼠标悬浮、下拉菜单、当前页高亮等所有常用功能。
标准网页横向导航栏，结构分为外层通栏导航容器、居中版心容器、导航菜单列表三部分，外层通栏容器宽度全屏，背景色统一，版心容器居中，内部菜单使用ul无序列表制作，li列表项承载菜单内容，a标签作为菜单链接，符合HTML语义化规范，搜索引擎友好，结构清晰，后期维护
导航栏设计有通用规范，常规PC端导航栏高度为50px-60px，行高和导航高度一致，实现文字垂直居中，菜单之间间距均匀，文字大小14px-16px，默认状态和鼠标悬浮状态有明显的样式区分，当前所在页面的导航菜单设置高亮样式，提升用户体验，背景色使用网站主题色，风格统一。
二、基础横向导航栏完整制作步骤
基础横向导航栏是最常用的导航样式，结构简单，兼容性完美，支持所有浏览器，制作步骤分为四步，全程用到的都是DIV+CSS基础属性，新手可以直接跟着制作，完成后可
第一步，搭建HTML语义化结构，最外层创建通栏导航DIV，内部添加居中版心DIV，版心内部放置ul无序列表，每个导航菜单对应一个li列表项，li内部添加a链接标签，写入菜单名称，比如首页、关于我们、产品中心、新闻资讯、联系我们，结构层级为：导航容器 > 版心 > ul > li > a。
第二步，清除列表默认样式，通过CSS重置ul和li的默认样式，设置ul标签margin:0; padding:0; list-style:none; 清除默认的小圆点、内外边距，让列表无默认样式，li标签设置float:left; 左浮动，实现多个菜单横向并排排列
第三步，设置导航栏整体样式，给外层通栏导航DIV设置高度，常规设置为60px，行高设置为60px，让导航文字垂直居中，设置主题色背景，版心DIV设置宽度1200px，margin:0 auto; 居中对齐，让导航内容整体居中。
第四步，设置菜单与链接样式，给li设置左右内边距，控制菜单宽度和间距，不要给li设置固定宽度，通过内边距自适应宽度，兼容性更好。给a标签设置display:block; 块级属性，文字居中，颜色白色，去掉下划线，鼠标悬浮时，修改a标签的背景色或者文字颜色，实现交互效果，最后给ul父级清除浮动，解决高度塌陷，基础导航栏就
三、导航栏常用交互
基础导航栏制作完成后，只需要添加简单的CSS样式，就可以实现常用的交互效果和样式优化，让导航栏更美观、更实用，无需JavaScript代码，纯CSS
第一个常用效果：导航菜单下划线动画，给a标签设置position:relative; 相对定位，通过伪类after添加底部线条，默认宽度为0，鼠标悬浮时，宽度设置为100%，实现平滑的下划线展开效果，提升导航质感，无需修改HTML结构，只需要添加CSS样式
第二个常用效果：当前导航菜单高亮，给当前所在页面的导航li标签，添加一个active高亮类名，设置专属的背景色、文字颜色，用户打开对应页面时，该导航菜单自动高亮，明确当前位置，是所有网站导航的必备
第三个常用效果：导航栏分割线，给除了最后一个菜单之外的所有li标签，添加右侧边框，作为菜单之间的分割线，通过CSS选择器li:not(:last-child) 设置border-right，自动排除最后一个菜单，无需单独给每个菜单设置，写法简洁，自动适配菜单数量变化。
第四个常用效果：导航栏右侧附加模块，在ul菜单列表旁边，添加搜索框、登录按钮、电话信息模块，设置右浮动，放在导航版心右侧，实现左侧菜单、右侧功能区的标准导航布局，符合主流网站
四、导航栏常见问题
导航栏布局常见的问题，都是浮动、列表样式、对齐方式导致的，四个高频问题，都有标准化的解决方法，新手直接对照处理即可。
第一个问题：导航菜单垂直排列，没有横向并排。原因是li标签未设置左浮动，或者浮动样式失效，解决方法：给所有li标签设置float:left;，检查CSS语法是否正确，给ul清除浮动，即可横向排列。
第二个问题：导航文字不垂直居中，上下位置偏移。原因是行高和导航高度不一致，解决方法：给导航容器设置固定高度，行高设置和高度完全相同的数值，文字自动垂直居中，无需额外设置内边
第三个问题：a链接鼠标悬浮样式不生效。原因是a标签未设置块级属性，或者选择器优先级错误，解决方法：给a标签设置display:block; 让a标签充满整个li菜单区域，悬浮样式直接写在a:hover上，优先级高于默认样式。
第四个问题：导航栏下方有默认间距，和下方模块有空隙。原因是ul或者li有默认外边距未清除，解决方法：全局重置ul、li标签的margin和padding为0，导航容器设置overflow:hidden; 清除默认间距，即可解决。
