中文(繁体)
用CSS程式碼,模擬製作techweb網站導航,你需要嗎?效果還跟真的差不多呢!
<!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=gb2312" /> <style type="text/css" > <!-- #siteNav { clear: both; float:left; width:750px; padding-left: 1px; background: #fff; font-size:12px; font-weight: bold; line-height:normal; border -bottom:2px solid #84B0C7; voice-family: ""}""; voice-family: inherit; width: 749px; } #siteNav ul { margin:0; padding:0; list-style:none }; #siteNav li { display:inline; margin:0; padding:0; } #siteNav a { float:left; background:url() no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration :none; } #siteNav a span { float:left; display:block; background:url() no-repeat right top; padding:5px 11px 4px 5px; color:#036; } /* Commented Backslash Hack hides rule from IE from IE -Mac */ #siteNav a span { float:none } /* End IE5-Mac hack */ #siteNav a:hover span { color:#036; } #siteNav a:hover { background-position:0% -42px ; } #siteNav a:hover span { background-position:100% -42px; } #siteNav #sel a { background-position:0% -42px; } #siteNav #sel a span { background-position:100% -42px ; } --> </style> <title>Demo</title> </head> <body> <div id="siteNav"> <ul> <li id="sel"><a href="#" ><span>首頁</span></a></li> <li><a href="#"><span>資訊</span></a></li> <li><a href ="#"><span>人物</span></a></li> <li><a href="#"><span>管理</span></a></li> <li ><a href="#"><span>經營</span></a></li> <li><a href="#"><span>財經</span></a></ li> <li><a href="#"><span>技術</span></a></li> <li><a href="#"><span>產品</span></ a></li> <li><a href="#"><span>網路</span></a></li> <li><a href="#"><span>電信</ span></a></li> <li><a href="#"><span>評論</span></a></li> <li><a href="#"><span >部落格</span></a></li> <li><a href="#"><span>老友記</span></a></li> <li><a href="# "><span>滾動</span></a></li> <li><a href="#"><span>搜尋</span></a></li> <li><a href="#"><span>WAP</span></a></li> </ul> </div> </body> </html>