Heim >Web-Frontend >CSS-Tutorial >Ausführliche Erklärung, wie man mit CSS ein zweisprachiges Menü auf Chinesisch und Englisch erstellt
Ausführliche Erklärung, wie man mit CSS ein zweisprachiges Menü auf Chinesisch und Englisch erstellt
- 小云云Original
- 2017-12-14 13:11:062719Durchsuche
In diesem Artikel wird hauptsächlich erläutert, wie Sie mit CSS ein zweisprachiges CSS-Menü für Chinesisch und Englisch erstellen. Führen Sie es zuerst aus, um den Effekt zu sehen. Sie werden auf jeden Fall zufrieden sein. Es wird ein Hintergrundbild verwendet, bitte laden Sie es selbst herunter.
Der Code lautet wie folgt:
<!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-->Verwandte Empfehlungen:
Verwenden Sie zur Implementierung reines CSS die Filtermenüfunktion
Schritte zum Implementieren eines animierten Dropdown-Menüeffekts mit CSS3
Detaillierte Erläuterung der Anpassungsmethode von PHP WeChat-Menü
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit CSS ein zweisprachiges Menü auf Chinesisch und Englisch erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!