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).

轉載于:https://www.cnblogs.com/Onlybiao/p/5670590.html

總結

以上是生活随笔為你收集整理的几种纯css布局的导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。