本文共 1364 字，大约阅读时间需要 4 分钟。
第一步、编写横向菜单的HTML代码架构
请将以下代码添加到HTML文档的导航栏区域中。
第二步、编写CSS代码
1、设置公共样式
请将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。
大家都知道，<ul>中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。
Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉
2、让文字横排
大家都知道，<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。
3、设置链接样式：
我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：
4、链接悬停效果：
通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。
这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。
好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：
你可以查看我们制作的在线演示和下载本文提供的实例包。
上面的CSS样式，我修改了一下。如下：
<style type="text/css">
#menu { font-size: 12px; font-weight: bolder; } #menu li{ list-style-image: none; list-style-type: none; background-color: #999999; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; float: left; } #menu li a{ color: #FFFFFF; text-decoration: none; margin: 0px; padding-top: 8px; display: block; /* 作为一个块 */ padding-right: 50px; /* 设置块的属性 */ padding-bottom: 8px; padding-left: 50px; } #menu li a:hover{ background-color: #0099CC; }</style>
转载地址：https://blog.csdn.net/lifan_3a/article/details/9955677 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
