Specific methods to implement bilingual menus using CSS span tags-CSS Tutorial-php.cn

Specific methods to implement bilingual menus using CSS span tags

零下一度

Release： 2017-04-25 15:41:35

Original

1628 people have browsed it

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>

Copy after login

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!