本文主要講解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> <style> body{ margin:0; padding:0; font-size:12px; } * { margin:0; padding:0; text-align:left; color:#9196A0; font-family:Verdana; } a{ color:#9196A0; } a:link { text-decoration: none } a:visited{ text-decoration: none } a:hover{ text-decoration:underline; color:#81BC06 } #nav{ height:100%; overflow: hidden; list-style:none; margin:0 auto; width:798px } #nav li{ float:left; font-weight:bold; height:60px; background:url(images/navbg.png) #fff repeat-x left bottom; padding:0 } #nav a{ text-align:center; padding-top:20px; display: block; height:40px; line-height:40px; } #nav li a.one{width:80px;} #nav li a.two{width:80px;} #nav li a.three{width:80px;} #nav li a.four{width:80px;} #nav li a.five{width:100px;} #nav li a.six{width:106px;} #nav li a.seven{width:100px;} #nav li a.eight{width:80px;} #nav li a.nine{width:92px;} #nav li a:hover.one{background:url(images/navunbg.gif) no-repeat -8px 0} #nav li a:hover.two{background:url(images/navunbg.gif) no-repeat -8px -60px} #nav li a:hover.three{background:url(images/navunbg.gif) no-repeat -8px -120px} #nav li a:hover.four{background:url(images/navunbg.gif) no-repeat -8px -180px} #nav li a:hover.five{background:url(images/navunbg.gif) no-repeat 4px -240px} #nav li a:hover.six{background:url(images/navunbg.gif) no-repeat 8px -300px} #nav li a:hover.seven{background:url(images/navunbg.gif) no-repeat 4px -360px} #nav li a:hover.eight{background:url(images/navunbg.gif) no-repeat -8px -420px} #nav li a:hover.nine{background:url(images/navunbg.gif) no-repeat 0 -480px} </style> </head> <body> <p> </p> <ul id="nav"> <li><a href="#" class="one">网站首页</a></li> <li><a href="#" class="two">关于我们</a></li> <li><a href="#" class="three">最新更新</a></li> <li><a href="#" class="four">更新排行</a></li> <li><a href="#" class="five">建站服务流程</a></li> <li><a href="#" class="six">客户案例</a></li> <li><a href="#" class="seven">网站使用指南</a></li> <li><a href="#" class="eight">网页特效</a></li> <li><a href="#" class="nine">联系我们</a></li> </ul> <!--nav end-->
#相關建議:
以上是詳解CSS如何製作中英文雙語菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章!