用UL制作横向CSS导航菜单.docVIP

用UL制作横向CSS导航菜单 目前互联网站前端页面的大趋势是采用DIV+CSS构架，因为它不仅能更受搜索引擎青睐，而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。 在本教程中，我们将通过实例来给大家介绍：如何使用(X)HTML中的UL标签来制作一个简单横向导航菜单。 为什么要用UL标签来制作导航栏和菜单栏？用UL做导航菜单之所以被广泛采用，主要是因为它的代码清晰，布局方便，更重要的是具有“语义”效果，能够方便进一步SEO。 ? 查看演示UL Menu 下载实例Demo Rar 第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 ul id=menu ?lia href=Baidu.Com/a/li ?lia href=http://www.Code52.NetCode52.Net/a/li ?lia href=Yahoo.Com/a/li ?lia href= class=lastGoogle.Com/a/li /ul ? 第二步、编写CSS代码 1、设置公共样式 请将以下CSS代码添加到HTML文档的head.../head标签范围中。 style type=text/css #menu {  font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */ } #menu, #menu li { list-style:none; /* 将默认的列表符号去掉 */ padding:0; /* 将默认的内边距去掉 */ margin:0; /* 将默认的外边距去掉 */ } /style 大家都知道，ul中的各条目li默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。 Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉 2、让文字横排 大家都知道，ul标签下的项目li默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。 style type=text/css #menu li {  float:left; /* 往左浮动 */ } /style 3、设置链接样式： style type=text/css #menu li a { display:block; /* 将链接设为块级元素 */ padding:8px 50px; /* 设置内边距 */ background:#3A4953; /* 设置背景色 */ color:#fff; /* 设置文字颜色 */ text-decoration:none; /* 去掉下划线 */ border-right:1px solid #000; /* 在左侧加上分隔线 */ } /style 我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式： style type=text/css #menu li a { display:block; /* 将链接设为块级元素 */ width:150px; /* 设置宽度 */ height:30px; /* 设置高度 */ line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */ text-align:center; /* 居中对齐文字 */ background:#3A4953; /* 设置背景色 */ color:#fff; /* 设置文字颜色 */ text-decoration:none; /* 去掉下划线 */ border-right:1px solid #000; /* 在左侧加上分隔线 */ } /style 4、链接悬停效果： 通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。 style type=text/css #menu li a:hover { background:#146C9C; /* 变换背景色 */ color:#fff; /* 变换文字颜色 */ } /style 这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。 ul id=menu lia href=Baidu.Com/