Heim > Artikel > Web-Frontend > So wechseln Sie in der Navigationsleiste in js zwischen Chinesisch und Englisch

So wechseln Sie in der Navigationsleiste in js zwischen Chinesisch und Englisch

php中世界最好的语言Original: 2018-04-18 16:54:402399Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit js zwischen Chinesisch und Englisch in der Navigationsleiste wechseln Praktischer Fall, werfen wir einen Blick darauf.

Die Höhe von ul beträgt die Hälfte von li, ul{overflow:hidden}

li:hover{

margin-top

:-40px;}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>中英切换导航条</title>
<styletype="text/css">
*{padding:0; margin:0;}
li{ list-style:none; }
a{ text-decoration:none;}
.nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}
.list{ width:1000px; height:40px; margin:0 auto;}
.list li{ float:left;}
.list li a{ display:block; transition:0.3s;}
.list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;}
.list b{ font-weight:100}
.list i{ font-style:normal; background:#333; color:#fff;}
.list a:hover{ margin-top:-40px;}
</style>
</head>
<body>
<pclass="nav">
 <ulclass="list">
 <li>
  <ahref="#">
  <b>Index</b>
  <i>首页</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>course</b>
  <i>职业课程</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>study</b>
  <i>就业学习</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>BBS</b>
  <i>社区</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>JiKe+</b>
  <i>发现+</i>
  </a>
 </li>
 </ul>
</p>
</body>
</html>

Empfohlene Lektüre:

JS-Implementierung der Schachbrettabdeckung

Detaillierte Erläuterung der Verwendung der parasitären kombinierten Vererbung von js

Das obige ist der detaillierte Inhalt vonSo wechseln Sie in der Navigationsleiste in js zwischen Chinesisch und Englisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php 继承 JS overflow margin ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes WebPack-Einführungs-TutorialNächster Artikel：Detailliertes WebPack-Einführungs-Tutorial

In Verbindung stehende Artikel

Mehr sehen