css3网页制造实例:仿Apple.com的导航栏
日期：2013-12-12 浏览次数：20663 次
网页制造aiyiweb文章简介：css3网页制造实例:仿Apple.com的导航栏
apple的官网有个相当不错的头部导航，今天我们运用css3的知识，不借助一张图片，来实现类似的效果。
下载源文件：http://www.Aiyiweb.Com/files/soft/1_121211104404.zip
1.会用到的css3知识
- text-shadow ：文字暗影
- border-radius：圆角
- box-shadow：容器暗影
- box-shadow: inset ：当添加inset后，表示使用内暗影
- gradient ：渐变，渐变的代码还是很多的，侥幸的是网上有自动生成渐变的工具，请看CSS3 Gradient Generator
- keyframes：这个属性就比较有意思，估量用的人很少，用于配合css3动画，理解为动画模块或一组css3动画设置。只要 WebKit 内核的浏览器支持这一特性，经过明河验证firefox4也不支持。
2.上一坨代码…
2.1导航容器款式
- /* 导航 */
- #appleNav {
- margin: 40px 0;
- list-style: none;
- /* Apple使用Lucida字体 */
- font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
- letter-spacing: -0.5px;
- font-size: 13px;
- /* 文字暗影 */
- text-shadow: 0 -1px 3px #202020;
- width: 873px;
- height:
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
