苹果公司™仅使用CSS的导航栏

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了苹果公司™仅使用CSS的导航栏相关的知识，希望对你有一定的参考价值。

Works in Safari 3.0
  1. <ul>
  2.   <li id="home">
  3.     <a href="">Home</a></li>
  4.   <li id="mac">
  5.     <a href="">Mac</a></li>
  6.   <li id="store">
  7.     <a href="">Store</a></li>
  8.   <li id="ipod">
  9.     <a href="">iPod</a></li>
  10.   <li id="iphone">
  11.     <a href="">iPhone</a></li>
  12.   <li id="download">
  13.     <a href="">Download</a>  </li>
  14.   <li id="support">
  15.     <a href="">Support</a></li>
  16. </ul>
  17.  
  18. ul#navigation li {
  19.   list-style-type: none;
  20.   display: block;
  21.   width: 8em;
  22.   float: left;
  23.   text-align: center;
  24.   font-family: "Lucida Grande", sans-serif;
  25.   height: 3em;
  26. }
  27.  
  28. ul#navigation li a {
  29.   display: block;
  30.   padding: .8em .5em .5em .5em;
  31.   text-decoration: none;
  32. }
  33.  
  34. ul#navigation li:first-child {
  35.   -webkit-border-top-left-radius: .5em;
  36.   -moz-border-radius-topleft: .5em;
  37.   border-top-left-radius: .5em;
  38.   -webkit-border-bottom-left-radius: .5em;
  39.   -moz-border-radius-bottomleft: .5em;
  40.   border-bottom-left-radius: .5em;
  41. }
  42.  
  43. ul#navigation li:last-child {
  44.   -webkit-border-top-right-radius: .5em;
  45.   -moz-border-radius-topright: .5em;
  46.   border-top-left-radius: .5em;
  47.   -webkit-border-bottom-right-radius: .5em;
  48.   -moz-border-radius-bottomright: .5em;
  49.   border-bottom-right-radius: .5em;
  50. }
  51.  
  52. ul#navigation li {
  53.   list-style-type: none;
  54.   display: block;
  55.   width: 8em;
  56.   float: left;
  57.   text-align: center;
  58.   font-family: "Lucida Grande", sans-serif;
  59.   height: 3em;
  60.   border-right: 1px #818181 solid;
  61.   -webkit-box-shadow: 1px 1px 1px #bbb;
  62.   box-shadow: 1px 1px 1px #bbb;
  63. }
  64.  
  65. ul#navigation li a {
  66.   display: block;
  67.   padding: .8em .5em .5em .5em;
  68.   text-decoration: none;
  69.   color: #292929;
  70.   text-shadow: 1px 1px 0px #cccccc;
  71. }
  72.  
  73. #navigation li {
  74.   background-color: #c9c9c9;
  75.   background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
  76. }
  77.  
  78. #navigation li:hover {
  79.   background-color: #333333;
  80.   background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
  81.   }
  82.  
  83. #navigation li:hover a {
  84.   color: #e8e8e8;
  85.   text-shadow: 1px 1px 0px #353535;
  86. }

以上是关于苹果公司™仅使用CSS的导航栏的主要内容，如果未能解决你的问题，请参考以下文章

没有 Javascript 的响应式导航栏，仅使用 HTML 和 CSS

CSS Apple的导航栏仅使用CSS

使用底部导航栏防止片段刷新

使用奇怪的导航栏的 CSS 悬停问题

底部应用栏在使用片段导航时向上/向下滑动（导航架构组件）

底部导航片段应用程序不断崩溃