1. 程式人生 > >CSS——新浪導航demo

CSS——新浪導航demo

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