温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用CSS span实现双语菜单功能

发布时间:2021-07-30 15:07:40 来源:亿速云 阅读:108 作者:chen 栏目:web开发

本篇内容主要讲解“如何利用CSS span实现双语菜单功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用CSS span实现双语菜单功能”吧!

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

CSS Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.yisu.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

  2. <html xmlns="https://www.yisu.com/1999/xhtml">   

  3. <head>   

  4. <title>CSS实现的中英文双语菜单</title>   

  5. <style type="text/css">   

  6. ul {   

  7.  list-style-typenone;   

  8. }   

  9. li {   

  10.  floatleft;   

  11.  displayblock;   

  12.  width100px;   

  13. }   

  14. a {   

  15.  font-size9pt;   

  16.  font-weightbold;   

  17.  color#006699;   

  18.  text-decorationnone;   

  19.  line-height12px;   

  20.  width100px;   

  21.  displayblock;   

  22.  vertical-alignmiddle;   

  23. }   

  24. a:hover {   

  25.  line-height12px;   

  26.  color#FF9900;   

  27.  text-decorationnone;   

  28. }   

  29. #enFont{   

  30.  font-size10px;   

  31.  color#999999;   

  32.  width100px;   

  33.  font-familyVerdanaArialHelveticasans-serif;   

  34.  line-height10px;   

  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实现双语菜单功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI