当前位置：Gxlcms > css > 用CSS的span标签来实现双语菜单的具体方法

用CSS的span标签来实现双语菜单的具体方法

时间：2021-07-01 10:21:17 帮助过：53人阅读

主要是用CSS的span标签来实现，其实看了代码你会觉得，原来实现双语菜单如此简单。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="www.w3.org/1999/xhtml">
  3. <head>
  4. <title>CSS实现的中英文双语菜单</title>
  5. <style type="text/css">
  6. ul {
  7.   list-style-type: none;
  8. }
  9. li {
  10.   float: left;
  11.   display: block;
  12.   width: 100px;
  13. }
  14. a {
  15.   font-size: 9pt;
  16.   font-weight: bold;
  17.   color: #006699;
  18.   text-decoration: none;
  19.   line-height: 12px;
  20.   width: 100px;
  21.   display: block;
  22.   vertical-align: middle;
  23. }
  24. a:hover {
  25.   line-height: 12px;
  26.   color: #FF9900;
  27.   text-decoration: none;
  28. }
  29. #enFont{
  30.   font-size: 10px;
  31.   color: #999999;
  32.   width: 100px;
  33.   font-family: Verdana, Arial, Helvetica, sans-serif;
  34.   line-height: 10px;
  35.   float:left;
  36. }
  37. span{margin:0px;padding:0px;}
  38. </style>
  39. </head>
  40. <body>
  41. <ul>
  42.   <li><a href="/">网站主页</a><span id="enFont">HOME</span></li>
  43.   <li><a href="/">最新更新</a><span id="enFont">NEW</span></li>
  44.   <li><a href="/">下载排行</a><span id="enFont">TOP</span></li>
  45.   <li><a href="/">网站服务</a><span id="enFont">SERVICE</span></li>
  46.   <li><a href="/">用户留言</a><span id="enFont">GUESTBOOK</span></li>
  47.   <li><a href="/">联系我们</a><span id="enFont">CONTACT</span></li>
  48. </ul>
  49. </body>
  50. </html>

以上就是用CSS的span标签来实现双语菜单的具体方法的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！