html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>联系小功能能</title> <link href="css/contact.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src=""></script> <!--[if IE 6]> <script src="" type="text/javascript"></script> <script type="text/javascript"> EvPNG.fix('div, ul, img, li, input, a, span'); </script> <![endif]--> </head> <body> <div class="top_daohang"> <ul> <li> <a href="#" title="提示一" class="topindex">首页</a> </li> <li> <a href="#" title="提示二" class="toplx">联系我们</a> </li> <li> <a href="#" title="提示三" target="_blank" class="toplc">建站流程</a> </li> <li> <a href="#" title="提示四" class="toptc">建站套餐</a> </li> </ul> </div> </body> </html>
CSS代码:
*{ margin:0; padding:0; } body{ background:none repeat scroll 0 0 #FFFFFF; color:#444444; font-family:'宋体',arial,sans-serif; font-size:12px; } .top_daohang{ border-bottom:1px solid #F1D2C3; border-left:1px solid #F1D2C3; border-radius:0 0 0 10px; overflow:hidden; position:absolute; right:0; text-align:right; top:6px; width:404px; z-index:1000; } .top_daohang ul li{ float:right; overflow:hidden; } .top_daohang li a{ background-color:#F6F6F6; display:inline-block; font-size:13px; height:22px; line-height:22px; opacity:0.5; padding-left:35px; padding-right:20px; } .top_daohang li a:hover{ color:#000000; opacity:1; transition:color 0.25s linear 0.1s; } .topindex{ background:url("images/Home.gif") no-repeat scroll 14px center rgba(0,0,0,0); font-weight:bold; } .toplx{ background:url("images/com.gif") no-repeat scroll 14px center rgba(0,0,0,0); } .toplc{ background:url("images/lc.gif") no-repeat scroll 14px center rgba(0,0,0,0); } .toptc{ background:url("images/tc.gif") no-repeat scroll 14px center rgba(0,0,0,0); }
效果如下图所示: