幾種純css布局的導航欄

1.垂直導航欄

頁面效果

?

?

<ul class="nav"><li><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="services.htm">Services</a></li><li><a href="work.htm">Our Work</a></li><li><a href="news.htm">News</a></li><li><a href="contact.htm">Contact</a></li>
</ul>

ul.nav {margin: 0;padding: 0;list-style-type: none;width: 8em;background-color: #8BD400;border: 1px solid #486B02;}ul.nav a {display: block;color: #2B3F00;text-decoration: none;border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02;background: url(arrow.gif) no-repeat 5% 50%;padding: 0.3em 2em;}ul.nav .last a {border-bottom: 0;}ul.nav a:hover,ul.nav a:focus,ul.nav .selected a {color: #E4FFD3;background-color: #6DA203;}

2.水平導航欄

頁面效果

<ul class="nav-bar"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>

 ul.nav-bar{margin:0;padding:0;list-style: none;width:70em;overflow: hidden;background: #FAA819 url(mainNavBg.gif) repeat-x;}ul.nav-bar li{float: left;}ul.nav-bar a{display: block;padding:0 3em;line-height:2.1em;text-decoration: none;color: #fff;background: url("divider.gif") repeat-y left top;}ul.nav-bar.first a{background-image: none;}ul.nav-bar li:frist-child a{background: none;}ul.nav-bar a:hover,ul.nav-bar a:focus{color: #333;}

3.簡化的滑動門標簽頁導航

頁面效果

 <ul class="nav-4"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>

ul.nav-4{margin:0;padding:0;list-style: none;width:72em;overflow: hidden;}ul.nav-4 li {float: left;background: url(tab-right.gif) no-repeat right top;}ul.nav-4 li a {display: block;padding:0 2em;line-height:2.5em;background: url("tab-left.gif") no-repeat left top;text-decoration: none;float: left;}ul.nav-4 a:hover,ul.nav-4 a:focus{color: #333;}

4.簡化的下拉菜單導航

頁面效果

<ul class="nav-5"><li><a href="/home/">Home</a></li><li><a href="/products/">Products</a><ul><li><a href="/products/silverback">Silverback</a></li><li><a href="/products/fontdeck">Font Deck</a></li></ul></li><li><a href="/services/">Services</a><ul><li><a href="/services/design/">Design</a></li><li><a href="/services/development/">Development</a></li><li><a href="/services/consultancy/">Consultancy</a></li></ul></li><li><a href="/content/">Content Us</a></li></ul>

ul.nav-5,ul.nav-5 ul{
            margin:0;
            padding:0;
            list-style-type: none;
            float: left;
            border:1px solid #486B02;
            background-color: #8bd400;
        }
        ul.nav-5 li{
            float: left;
            width:8em;
            background-color: #8bd400;
        }
        ul.nav-5 li ul{
            width:8em;
            position: absolute;
            left:-999em;
        }
        .nav-5 li:hover ul{
            left:auto;
        }
        ul.nav-5 a{
            display: block;
            color: #2B3F00;
            text-decoration: none;
            padding:0.3em 1em;
            border-right:1px solid #486B02;
            border-left:1px solid #E4FFD3;
        }
        ul.nav-5 li li a{
            border-top:1px solid #E4FFD3;
            border-bottom:1px solid #486B02;
            border-left:0;
            border-right:0;
        }
        ul.nav-5 li:list-child a{
            border-right: 0;
            border-bottom:0;
        }
        ul a:hover,
        ul a:focus{
            color: #E4FFD3;
            background-color: #6DA203;
        }

第一次寫博文，內容來自CSS Mastery?Advanced Web Standards?Solutions?(Second Edition).