이 글에서는 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-->
관련 권장 사항:
css3을 사용하여 애니메이션 드롭다운 메뉴 효과 구현 단계
사용자 정의 PHP WeChat 메뉴의 방법에 대한 자세한 설명
위 내용은 CSS를 사용하여 중국어 및 영어 이중 언어 메뉴를 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!