包头信息门户导航菜单

作者:dangbao 日期:2009-05-31

字体大小: 小中大

这是参照主流的门户导航样式给包头信息网写的。我写的代码尽量没使用图片来分隔分类菜单。而是给li用的border-right:1px dashed #ccc,经过调整了行距，看起来上下两条边框象是一条似得。效果还不错。兼容IE系列和FF。当然如果想要精确效果可以用背景图片来控制，我的例子仅供参考。请运行代码后查看效果！

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包头信息导航代码</title>
<style>
*{padding:0px;margin:0px;list-style:none;}
.nav{width:558px;height:56px;font-size:12px;border:1px solid #ccc;margin:20px}
.nav ul{margin:6px 0 0;}
.nav ul li{float:left;width:175px;border-right:1px dashed #ccc;padding:0 4px 0 6px;line-height:23px;}
.nav ul li a{padding:2px 3px 0;color:#666;margin:0 3px;text-decoration:none}
.nav ul .noborder{border:none}
.nav ul li a:hover{color:#fff;background:#ff5500;}
.nav ul li .b{font-weight:bold;}
</style>
</head>

Tags: 包头菜单

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

网摘收藏:

相关日志:

评论: 3 | 引用: 0 | 查看次数: -

Sunles[2009-06-25 10:09 AM |

]

不错的说!

s-cell.cn[2009-06-09 00:51 AM |

]

蛮有TX首页特色的
这种导航菜单比较适合大信息量的网站导航
分类明确

PS:说个代码的题外话这种导航分类分不好会很乱呵呵

zhee[2009-05-31 01:10 PM |

]

挺好的

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.