CSS——新浪導航demo
阿新 • • 發佈:2017-11-04
ont display top 運用 one isp splay logs round
主要運用的dispaly將a變成行內塊,再用padding撐開寬度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .nav { height: 40px; background: #eee; border-top: 3px solid orange; border-bottom: 1px solid #aaa; } .nav-con { width: 1000px; height: 40px; margin: 0 auto; } a { font: 12px/40px 微軟雅黑; /*40px=>line-height:40px;*/ color: #333; display: inline-block; height: 40px; text-decoration: none; padding: 0 12px; } a:hover { background: #999; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <a href="#">設為首頁</a> <a href="#">手機新浪網</a> <a href="#">移動客戶端</a> </div> </div> </body> </html>
CSS——新浪導航demo