几种纯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>
html代码
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;
        }
css样式

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>
水平导航html
 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>
html
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;
        }
css

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>
html
 1 ul.nav-5,ul.nav-5 ul{
 2             margin:0;
 3             padding:0;
 4             list-style-type: none;
 5             float: left;
 6             border:1px solid #486B02;
 7             background-color: #8bd400;
 8         }
 9         ul.nav-5 li{
10             float: left;
11             width:8em;
12             background-color: #8bd400;
13         }
14         ul.nav-5 li ul{
15             width:8em;
16             position: absolute;
17             left:-999em;
18         }
19         .nav-5 li:hover ul{
20             left:auto;
21         }
22         ul.nav-5 a{
23             display: block;
24             color: #2B3F00;
25             text-decoration: none;
26             padding:0.3em 1em;
27             border-right:1px solid #486B02;
28             border-left:1px solid #E4FFD3;
29         }
30         ul.nav-5 li li a{
31             border-top:1px solid #E4FFD3;
32             border-bottom:1px solid #486B02;
33             border-left:0;
34             border-right:0;
35         }
36         ul.nav-5 li:list-child a{
37             border-right: 0;
38             border-bottom:0;
39         }
40         ul a:hover,
41         ul a:focus{
42             color: #E4FFD3;
43             background-color: #6DA203;
44         }
css

第一次写博文，内容来自CSS Mastery Advanced Web Standards Solutions (Second Edition).

posted @ 2016-07-14 15:25  Reality-彪  阅读(544)  评论(0)  编辑  收藏  举报