HTML/Xhtml CSS教程 Dreamweaver Frontpage教程 Javascript/Ajax XML/XSLT CMS技巧 心得技巧
返回首页
当前位置: 主页 > 网页设计 > HTML/Xhtml >

css3网页制作实例:仿Apple.com的导航栏

时间:2013-03-25 03:09来源: 作者: 点击:
css3网页制作实例:仿Apple.com的导航栏,css3网页制作实例:仿Apple.com的导航栏

的官网有个相当不错的头部导航,今天我们运用css3的知识,不借助一张图片,来实现类似的效果。

下载源文件:

1.会用到的css3知识

  • text-shadow :文字阴影
  • border-radius:圆角
  • box-shadow:容器阴影
  • box-shadow: inset :当增加inset后,表示使用内阴影
  • gradient :渐变,渐变的代码还是很多的,幸运的是网上有自动生成渐变的工具,请看
  • keyframes:这个属性就比较有意思,估计用的人很少,用于配合css3动画,理解为动画模块或一组css3动画设置。只有 WebKit 内核的浏览器支持这一特性,经过明河验证firefox4也不支持。

2.上一坨代码…

2.1导航容器样式
  1. /* 导航 */
  2. #appleNav {
  3. margin: 40px 0;
  4. list-style: none;
  5. /* Apple使用Lucida字体 */
  6. font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  7. letter-spacing: -0.5px;
  8. font-size: 13px;
  9. /* 文字阴影 */
  10. text-shadow: 0 -1px 3px #202020;
  11. width: 873px;
  12. height: 34px;
  13. /*圆角*/
  14. -moz-border-radius: 4px;
  15. -webkit-border-radius: 4px;
  16. border-radius: 4px;
  17. /*阴影*/
  18. -moz-box-shadow: 0 3px 3px #cecece;
  19. -webkit-box-shadow: 0 3px 3px #cecece;
  20. box-shadow: 0 3px 4px #8b8b8b;
  21. }
爱设计教学网(www.2sheji.com)——为您所需,替您所想!
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容