当前位置:首页>>网站制作>>CSS教程>>正文

用CSS3渐变制作网页导航菜单

2017-12-23T11:47:59 来源:设计前沿收集 作者:sunnycha

对于网页布局来说,导航菜单是页面中非常重要的部分,利用CSS中的渐变属性值可以让导航的效果更加丰富。案例效果如下:

网站前端之利用CSS3渐变实现导航菜单

本案例分为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的代码如下:

网站前端之利用CSS3渐变实现导航菜单

网站前端之利用CSS3渐变实现导航菜单

说明:导航中通过改变超链接渐变的起始方向来实现明显的对比效果,初始状态方向是从顶部(top),鼠标经过状态方向是从底部(bottom),代码如图中红框1所示。

至此,案例制作完成。