前言：
而今我们对“html共用导航”可能比较着重，朋友们都需要了解一些“html共用导航”的相关知识。那么小编也在网上汇集了一些有关“html共用导航””的相关资讯，希望小伙伴们能喜欢，朋友们一起来学习一下吧！对于网页布局来说，导航菜单是页面中非常重要的部分，利用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所示。
至此，案例制作完成。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html共用导航
