用ul制作横向css导航菜单

《用ul制作横向css导航菜单》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、用UL制作横向CSS导航菜单目前互联网站前端页面的大趋势是采用DIV+CSS构架，因为它不仅能更受搜索引擎青睐，而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。在本教程中，我们将通过实例来给大家介绍：如何使用(X)HTML中的

标签来制作一个简单横向导航菜单。为什么要用
标签来制作导航栏和菜单栏？用UL做导航菜单之所以被广泛采用，主要是因为它的代码清晰，布局方便，更重要的是具有“语义”效果，能够方便进一步SEO。 查看演示ULMenu下载实例DemoRar第一步、编写横向菜单的HTML代码架构请将以下代码添加到HTML文档的

2、导航栏区域中。 

• Baidu.Com
 
• Code52.Net
 
• Yahoo.Com
 
• Google.Com
 第二步、编写CSS代码1、设置公共样式请将以下CSS代

3、码添加到HTML文档的...标签范围中。#menu{font:12pxverdana,arial,sans-serif;/*设置文字大小和字体样式*/}#menu,#menuli{list-style:none;/*将默认的列表符号去掉*/padding:0;/*将默认的内边距去掉*/margin:0;/*将默认的外边距去掉*/}大家都知道，

中的各条目
• 默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。Tips：因为我们现在将导航栏拉出来独立讲解，所

  4、以需要设置一些公共样式，如果您在body或其他地方已经重设了默认效果，以上代码可以去掉2、让文字横排大家都知道，

  标签下的项目
  • 默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。#menuli{float:left;/*往左浮动*/}3、设置链接样式：#menulia{display:block;/*将链接设为块级元素*/padding:8px50px;/*设置内边距*/background:#3A4953;/*设置背景色*/col

    5、or:#fff;/*设置文字颜色*/text-decoration:none;/*去掉下划线*/border-right:1pxsolid#000;/*在左侧加上分隔线*/}我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：#menulia{display:block;/*将链接设为块级元素*/width:150px;/*设置宽度*/height:30px;/*设

    6、置高度*/line-height:30px;/*设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中*/text-align:center;/*居中对齐文字*/background:#3A4953;/*设置背景色*/color:#fff;/*设置文字颜色*/text-decoration:none;/*去掉下划线*/border-right:1pxsolid#000;/*在左侧加上分隔线*/}4、链接悬停效果：通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更

    7、炫丽，你可以在CSS悬停属性上定义背景图片。#menulia:hover{background:#146C9C;/*变换背景色*/color:#fff;/*变换文字颜色*/}这里的代码一个缺陷，最右边会多出来一个边框，由于:first-child伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给HTML代码增加一个额外选择符。

  • Baidu.Com

  • 8、href="http://www.Code52.Net">Code