对于网页布局来说，导航菜单是页面中非常重要的部分，利用CSS中的渐变属性值可以让导航的效果更加丰富。案例效果如下：
本案例分为2个部分，一个是网页文件，一个是样式文件。
网页文件menu.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/apple.css"/>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</body>
</html>
样式文件apple.css的代码如下：
说明：导航中通过改变超链接渐变的起始方向来实现明显的对比效果，初始状态方向是从顶部（top），鼠标经过状态方向是从底部（bottom），代码如图中红框1所示。
至此，案例制作完成。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
