CSS span实现双语菜单的方法教程

作者:divcss教程吧      点击次数:664次     发布日期:2015-01-21

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

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.jb51.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.jb51.net/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="/">divcss8.</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>

 

分享DIVCSS8