中英文切換導航欄（最簡單）
阿新 • • 發佈：2018-07-23
body ali fan center href pla 20px meta hover
使用ul li標簽構建導航欄，在li中設置兩個並列標簽<a>和<span>，分別裝有中文和英文，利用css:hover偽類設置顯示隱藏。
代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>中英文切換導航欄</title> <style type="text/css"> *{margin:0px;padding:0;} ul{overflow: hidden;} li{ width:120px; height:30px; float:left; list-style:none; margin-left:1px; text-align:center; background:#dfdfdf; line-height:30px; color:#4e4e4e; } a{ display:none; background:#df4e19; text-decoration:none; color:#eefff0; } li:hover>a{display:block;} li:hover>span{display:none;} </style> </head> <body> <ul> <li><a href="#">首頁</a><span>Home</span></li> <li><a href="#">博客</a><span>Blog</span></li> <li><a href="#">作品</a><span>guestbook</span></li> <li><a href="#">挑選</a><span>Pickbar</span></li> <li><a href="#">粉絲</a><span>fansir</span></li> </ul> </body> </html>
中英文切換導航欄（最簡單）