<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*全局属性*/
*{ margin: 0; padding: 0; font-size: 14px; font-weight: bold; }
/* 纵向导航条 */
#div1 a{ display: block; height: 30px;line-height: 30px;width: 75px; text-align: center; background-color: #ccc; margin-bottom: 1px; text-decoration: none; }
#div1 a:hover{ color: white; background-color: #E5721D; }
/*横向菜单*/
#div2 li{ display: block; float: left; }
#div2 a{ display: block; height: 30px;line-height: 30px;width: 75px; text-align: center; background-color: #ccc; margin-right: 1px; text-decoration: none; }
#div2 a:hover{ color: white; background-color: #E5721D; margin-right: 1px; }
/*圆角菜单*/
#div3 ul{ border-bottom: 5px solid #E5721D; height: 50px; }
#div3 li{ display: block; float: left; top: 20px; margin-top: 25px; }
#div3 a{ display: block; height: 25px;line-height: 25px;width: 75px; text-align: center; background-color: #ccc; margin-right: 1px; text-decoration: none; border-radius: 9px 9px 0 0; }
#div3 a:hover{ color: white; background-color: #E5721D; margin-right: 1px; }
/*伸缩菜单*/
#div4 ul{ border-bottom: 5px solid #E5721D; height: 50px; }
#div4 li{ display: block; float: left; top: 20px; margin-top: 25px; }
#div4 a{ display: block; height: 25px;line-height: 25px;width: 75px; text-align: center; background-color: #ccc; margin-right: 1px; text-decoration: none; }
#div4 a:hover{ color: white; background-color: #E5721D; margin-right: 1px; margin-top: -10px; height: 40px; line-height: 40px;}
div { padding-left: 20px; }
div ul{ list-style: none; }
</style>
</head>
<body>
<!-- 纵向菜单 -->
<div id="div1">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">产品特色</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<br /><br />
<hr />
<br />
<!-- 横向菜单 -->
<div id="div2">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">产品特色</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<br />
<br /><br />
<hr />
<br />
<div id="div3">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">产品特色</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<br /><br />
<hr />
<br />
<!-- 垂直伸缩菜单 -->
<div id="div4">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">产品特色</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<br /><br />
<hr />
<br />
<!-- 水平伸缩菜单 -->
<div id="div5">
<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>各种一级导航条
最新推荐文章于 2022-03-19 15:31:35 发布
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
