<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .d { height: 40px; background: #337ccb; } li { display: inline-block; width: 60px; line-height: 40px; height: 40px; color: white; text-align: center; border-color: red; border-right: 1px solid #5893d2; font-size: 18px; } li:hover { background-color: #5893d2; } </style> </head> <body> <div class="d"> <ul type="none"> <li>首页</li> <li>歌单</li> <li>动态</li> <li>歌手</li> <li>分类</li> <li>榜单</li> <li>MV</li> <li>演出</li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding 0px; } #box { background: #337ccb; } #box_con { height: 42px; margin-left: 120px; } #box_con a { text-decoration: none; display: inline-block; height: 42px; line-height: 42px; width: 82px; color: #fff; text-align: center; border-right: 1px solid #5893d2 ; } a:hover { background-color: #4790e0 ; } #mv { width: 76px ; } </style> </head> <body> <div id="box"> <div id="box_con"> <a href="#">首页</a><a href="#">歌单</a><a href="#">动态</a><a href="#">歌手</a><a href="#">分类</a><a href="#">榜单</a><a href="#" id="mv">MV</a><a href="#">演出</a> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hrbust</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; } ul { list-style: none; } img { border: none; vertical-align: middle; } .nav { background: #0d45b4; } .nav_con { height: 40px; width: 1200px; margin: 0 auto; } li { display: inline-block; width: 105px; height: 40px; line-height: 40px; text-align: center; } a { color: white; font-size: 16px; } #home { width: 45px; } li:hover { background: #4790e0; } </style> </head> <body> <div class="nav"> <div class="nav_con"> <ul> <li id="home"><a href="#"><img src="C:/Users/Administrator/Desktop/home.jpg" alt="home"></a></li><li><a href="#">學校概況</a></li><li><a href="#">黨政機構</a></li><li><a href="#">教學單位</a></li><li><a href="#">招生就業</a></li><li><a href="#">科研產品</a></li><li><a href="#">學科建設</a></li><li><a href="#">圖書情報</a></li><li><a href="#">學生天地</a></li><li><a href="#">國際合作</a></li><li><a href="#">校友會</a></li><li><a href="#">基金會</a></li> </ul> </div> </div> </body> </html>