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

时间：2021-05-08

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

CSS Code复制内容到剪贴板
  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""https://www.jb51.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <htmlxmlns="https://www.jb51.net/1999/xhtml">
  • <head>
  • <title>CSS实现的中英文双语菜单</title>
  • <styletype="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><ahref="/">网站主页</a><spanid="enFont">HOME</span></li>
  • <li><ahref="/">最新更新</a><spanid="enFont">NEW</span></li>
  • <li><ahref="/">下载排行</a><spanid="enFont">TOP</span></li>
  • <li><ahref="/">网站服务</a><spanid="enFont">SERVICE</span></li>
  • <li><ahref="/">用户留言</a><spanid="enFont">GUESTBOOK</span></li>
  • <li><ahref="/">联系我们</a><spanid="enFont">CONTACT</span></li>
  • </ul>
  • </body>
  • </html>

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章