CSS橙色水平的导航菜单，代码不多、简洁实用

发布时间：2018-09-10 12:38:26 所属栏目：政策来源：站长网

导读：CSS橙色水平的导航菜单，代码不多、简洁实用。用到了三张橙色的图片背景，完全用纯CSS代码实现，欢迎测试使用。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns

　　CSS橙色水平的导航菜单，代码不多、简洁实用。用到了三张橙色的图片背景，完全用纯CSS代码实现，欢迎测试使用。

　　演示：

<!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> <title>CSS橙绿色水平导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("/uploads/allimg/1106/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia,"Times New Roman",Times,serif;} #time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;} #time4bed-nav ul li{display:block;float:left;margin:0 2px;} #time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;} #time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;} #time4bed-nav ul li a:hover{color:#fff;} #time4bed-nav ul li a:hover span{display:block;cursor:pointer;} #time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("/uploads/allimg/1106/time2bed_left-ON.gif") no-repeat top left;} #time4bed-nav ul li a.current span{background:transparent url("/uploads/allimg/1106/time2bed_right-ON.gif") no-repeat top right;height:43px;} </style> </head> <body> <div id="time4bed-nav"> <ul> <li><a href="/" target="_blank"><span>Home</span></a></li> <li><a href="/" target="_blank" class="current"><span>Effect</span></a></li> <li><a href="/" target="_blank"><span>About Me</span></a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：鹰潭站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!