用css3实现一个苹果风格的导航菜单-CSDN博客

这是apple.com的很漂亮的导航栏：

如果用Firebug仔细研究一下，就会发现这个导航栏的实现用了4张图片。如下图：

现在随着css3的脚步越来越近，我在想用光用css3能不能实现上面的效果呢？下面就是我用纯css3实现的导航，一点都没有用到图片。

当然肯定跟原版的有些差距，我很难把握原来的渐变颜色，但是基本的风格还是一直的。

实现过程

首先，html代码：

<ul id='nav'>
   <li><a href='#'>Store</a></li>
   <li><a href='#'>Mac</a></li>
   <li><a href='#'>iPod</a></li>
   <li><a href='#'>iPhone</a></li>
   <li><a href='#'>iPad</a></li>
   <li><a href='#'>iTune</a></li>
   <li class='last'><a href='#'>Support</a></li>
</ul>

就是利用这样一段简单的代码，加上神奇的css3，就能实现apple style了。

然后：样式化

分析一下苹果网站的那个导航栏，都有哪些元素？圆角，渐变，阴影，文字内嵌的效果，分隔符也有点外发光的效果。这些效果大部分都可以用css3来实现。

先给出整个css的代码：

代码

         < style >
            #nav {
                margin : 100px auto ;
                width : 850px ;
                height : 40px ;
                 /* 渐变 */
                background : -moz-linear-gradient(-90deg,#cacaca,#9f9f9f) ;
                background : -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f)) ;
                 /* 圆角 */
                -moz-border-radius : 5px ;
                -webkit-border-radius : 5px ;
                 /* 阴影 */
                box-shadow : #b1b1b1 1px 1px ;
                -moz-box-shadow : #b1b1b1 0 1px 2px ;
                -webkit-box-shadow : #b1b1b1 0 1px 2px ;
             }
            #nav li {
                float : left ;
                 /* padding:0 40px; */
                width : 110px ;
                text-align : center ;
                list-style : none ;
                height : 40px ;
                line-height : 40px ;
                border-right : 1px solid #999999 ;
             }

            #nav li.last {
                border : none ;
             }

            #nav a {
                text-decoration : none ;
                color : #262626 ;
                font-weight : 600 ;
                font-size : 13px ;
                font-family : "Segoe UI",Helvetica,sans-serif ;
                 /* 文本阴影 */
                text-shadow : #e8e8e8 0 1px 1px ;
             }
         </ style >

第一步：给ul和li设置一下样式，先形成导航栏的基本样子。

#nav{ margin:100px auto; width:850px; height:40px;} (#nav是ul的id)

#nav li{ float:left; width:110px; text-align:center; list-style:none; height:40px; line-height:40px;}

#nav a{ text-decoration:none; color:#262626; font-weight:600; font-size:13px; font-family:"Segoe UI",Helvetica,sans-serif;}

因为我们是根据苹果的风格来的，所以在字体，字号的设置上也是以接近苹果风格为目标。

第二步：实现渐变颜色效果

#nav{

　　...

　 background:-moz-linear-gradient(-90deg,#cacaca,#9f9f9f);
background:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#9f9f9f));

　 ...}

如果这些css3语法不太清除的话可以参考这里：你应该知道的基本的css技巧或是 css技巧

通过-moz-和-webkit-可以看出来，这个效果只能在firefox，chrome，safari中实现，至于ie，只能期待ie9了。