您的位置：首页 > Web前端 > CSS

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

2014-12-02 09:12 495 查看
　　主要是用CSS的span标签来实现，其实看了代码你会觉得，原来实现双语菜单如此简单。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.jb51.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    <html xmlns="http://www.jb51.net/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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航