实例:用UL制作横向CSS导航菜单
2009-08-18 23:25
766 查看
目前互联网站前端页面的大趋势是采用DIV+CSS构架,因为它不仅能更受搜索引擎青睐,而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。
在本教程中,我们将通过实例来给大家介绍:如何使用(X)HTML中的<UL>标签来制作一个简单横向导航菜单。
为什么要用<UL>标签来制作导航栏和菜单栏?用UL做导航菜单之所以被广泛采用,主要是因为它的代码清晰,布局方便,更重要的是具有“语义”效果,能够方便进一步SEO。
第一步、编写横向菜单的HTML代码架构
请将以下代码添加到HTML文档的导航栏区域中。
你可以查看我们制作的在线演示和下载本文提供的实例包。
你可能感兴趣的文章:
CSS教程:用纯CSS制作垂直/水平菜单
CSS之美:创建标准美观的导航栏菜单
兼容多浏览器的CSS横向多级浮动下拉菜单
CSS打造漂亮的步骤菜单Step Menu
漂亮的JavaScript浮动多级下拉菜单
>>更多CSS和JavaScript炫丽的菜单效果
在本教程中,我们将通过实例来给大家介绍:如何使用(X)HTML中的<UL>标签来制作一个简单横向导航菜单。
为什么要用<UL>标签来制作导航栏和菜单栏?用UL做导航菜单之所以被广泛采用,主要是因为它的代码清晰,布局方便,更重要的是具有“语义”效果,能够方便进一步SEO。
第一步、编写横向菜单的HTML代码架构
请将以下代码添加到HTML文档的导航栏区域中。
<ul id="menu"> <li> <a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a> </li> <li> <a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a> </li> <li> <a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.Com</a> </li> <li> <a href="http://www.google.com" mce_href="http://www.google.com" class="last">Google.Com</a> </li> </ul>
第二步、编写CSS代码
1、设置公共样式
请将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。<style type="text/css" mce_bogus="1"> #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> <style type="text/css" mce_bogus="1"> #menu li { float: left; /* 往左浮动 */ } </style>
3、设置链接样式:<style type="text/css" mce_bogus="1"> #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" mce_bogus="1"> #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" mce_bogus="1"> #menu li a:hover { background: #146C9C; /* 变换背景色 */ color: #fff; /* 变换文字颜色 */ } </style>
这里的代码一个缺陷,最右边会多出来一个边框,由于 :first-child 伪类不被IE系列浏览器所支持,我们只能单独写一个样式,将最后一个边框去掉,同时要给 HTML 代码增加一个额外选择符。<ul id="menu"> <li> <a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a> </li> <li> <a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a> </li> <li> <a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.com</a> </li> <li> <a href="http://www.google.com" mce_href="http://www.google.com" class="last">Google.com</a> </li> </ul> <style type="text/css" mce_bogus="1"> #menu li a.last { border-right: 0; /* 去掉左侧边框 */ } </style>
好了,到这里一个简单的横向导航菜单就制作完成了,是不是很简单? 下面给出完整代码:
[code]
<style type="text/css" mce_bogus="1"> #menu { font: 12px verdana, arial, sans-serif; } #menu,#menu li { list-style: none; padding: 0; margin: 0; } #menu li { float: left; } #menu li a { display: block; /* 如果是中英文混排的文字,建议用固定宽度 width:150px; height:30px; line-height:30px; text-align:center; */ padding: 8px 50px; background: #3A4953; color: #fff; text-decoration: none; border-right: 1px solid #000; } #menu li a:hover { background: #146C9C; color: #fff; text-decoration: none; border-right: 1px solid #000; } #menu li a.last { border-right: 0; /* 去掉左侧边框 */ } </style> <ul id="menu"> <li> <a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a> </li> <li> <a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a> </li> <li> <a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.com</a> </li> <li> <a href="http://www.google.com" mce_href="http://www.google.com" class="last">Google.com</a> </li> </ul>
你可以查看我们制作的在线演示和下载本文提供的实例包。
你可能感兴趣的文章:
CSS教程:用纯CSS制作垂直/水平菜单
CSS之美:创建标准美观的导航栏菜单
兼容多浏览器的CSS横向多级浮动下拉菜单
CSS打造漂亮的步骤菜单Step Menu
漂亮的JavaScript浮动多级下拉菜单
>>更多CSS和JavaScript炫丽的菜单效果
相关文章推荐
- csc实例:用UL制作横向CSS导航菜单
- CSS 菜单系列:用 UL 制作横向导航菜单-入门版
- 用UL制作横向CSS导航菜单
- ul制作横向导航菜单
- 纯CSS制作下拉导航菜单实例代码
- CSS制作横向菜单,如何让li元素在ul中居中?
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- CSS利用UL LI制作横向列表菜单
- 如何应用ul、li标签 创建css横向导航菜单?
- CSS+DIV设计实例:纯CSS制作下拉导航菜单
- 如何应用ul、li标签 创建css横向导航菜单?
- 如何应用ul、li标签 创建css横向导航菜单?
- 网页设计-[CSS+DIV设计实例:纯CSS制作下拉导航菜单]
- 用ul、li标签 创建css横向导航菜单?
- Html+css+div+ul+li制作Web前端导航菜单。
- div+css 制作横向导航菜单
- CSS+DIV设计实例:纯CSS制作下拉导航菜单
- 用ul、li标签创建css横向导航菜单示例
- 用列表ul制作css横向菜单
- 用ul、li标签创建css横向导航菜单示例