您当前位置：首页 > web前端 > htmlcss > 纯CSS 无序列表打造的网站导航菜单

纯CSS 无序列表打造的网站导航菜单

来源：程序员人生发布时间：2013-10-04 05:31:23 阅读次数：2795次

　　网(LieHuo.Net)教程三行的纯CSS网站导航栏菜单，改改风格，让大家感到新鲜一点，其它主要还是使用了Li列表，整体布局简洁，美观大方，适合大部分网站使用，颜色和菜单空隙可随意调节，希望大家喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多行的导航栏</title><style type="text/css">* { margin:0; padding:0; }body { font:12px/180% Verdana, Geneva, sans-serif; }li { list-style:none; }a { text-decoration:none; color:#999; }a:hover { color:#900; text-decoration:underline; }.nav_sub { width:700px; margin:0 auto; height:1%; overflow:hidden; margin-bottom:10px; background:#EDEEEF; }.title_nav_sub { display:block; padding:3px 20px; text-align:center; background:#48862F; color:#fff; float:left; }.nav_sub ul { float:left; }.nav_sub ul li { display:inline; }.nav_sub ul a { float:left; padding:3px 20px; }.more { float:right; }</style></head><body><div class="nav_sub"><span class="title_nav_sub">源码</span><ul><li><a href="#" title="liehuo.net">ASP</a></li><li><a href="#" title="liehuo.net">PHP</a></li><li><a href="#" title="liehuo.net">JSP</a></li><li><a href="#" title="liehuo.net">DELPHI</a></li><li><a href="#" title="liehuo.net">VS</a></li><li><a href="#" title="liehuo.net">AJAX</a></li><li><a href="#" title="liehuo.net">JQUERY</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div><div class="nav_sub"><span class="title_nav_sub">特效</span><ul><li><a href="#" title="liehuo.net">导航菜单类</a></li><li><a href="#" title="liehuo.net">CSS布局类</a></li><li><a href="#" title="liehuo.net">表单及按钮</a></li><li><a href="#" title="liehuo.net">图片切换</a></li><li><a href="#" title="liehuo.net">鼠标特效</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div><div class="nav_sub"><span class="title_nav_sub">文章</span><ul><li><a href="#" title="liehuo.net">ASP教程</a></li><li><a href="http://www.wfuyu.com/" title="liehuo.net">站长资讯</a></li><li><a href="#" title="liehuo.net">PHP技术</a></li><li><a href="#" title="liehuo.net">SEO</a></li><li><a href="#" title="liehuo.net">其它</a></li></ul><a href="#" title="liehuo.net" class="more">更多>></a> </div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' title="liehuo.net" target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 jQuery1.3.2源码学习5:jQuery 中的原型

下一篇 加解密文本的函数

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点