search

Home >Web Front-end >CSS Tutorial >Specific methods to implement bilingual menus using CSS span tags

Specific methods to implement bilingual menus using CSS span tags

零下一度
零下一度Original
2017-04-25 15:41:351679browse

It is mainly implemented using the span tag of CSS. In fact, after reading the code, you will feel that it is so simple to implement a bilingual menu. . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>CSS实现的中英文双语菜单</title>
<style type="text/css">
ul {
  list-style-type: none;
}
li {
  float: left;
  display: block;
  width: 100px;
}
a {
  font-size: 9pt;
  font-weight: bold;
  color: #006699;
  text-decoration: none;
  line-height: 12px;
  width: 100px;
  display: block;
  vertical-align: middle;
}
a:hover {
  line-height: 12px;
  color: #FF9900;
  text-decoration: none;
}
#enFont{
  font-size: 10px;
  color: #999999;
  width: 100px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 10px;
  float:left;
}
span{margin:0px;padding:0px;}
</style>
</head>
<body>
<ul>
  <li><a href="/">网站主页</a><span id="enFont">HOME</span></li>
  <li><a href="/">最新更新</a><span id="enFont">NEW</span></li>
  <li><a href="/">下载排行</a><span id="enFont">TOP</span></li>
  <li><a href="/">网站服务</a><span id="enFont">SERVICE</span></li>
  <li><a href="/">用户留言</a><span id="enFont">GUESTBOOK</span></li>
  <li><a href="/">联系我们</a><span id="enFont">CONTACT</span></li>
</ul>
</body>
</html>

The above is the detailed content of Specific methods to implement bilingual menus using CSS span tags. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css3 implements a beautiful peach ripe animation effect codeNext article：css3 implements a beautiful peach ripe animation effect code

Related articles

See more