网页导航伸缩及圆角效果

最新推荐文章于 2024-03-30 01:29:51 发布

Blithe_Lee2

最新推荐文章于 2024-03-30 01:29:51 发布

阅读量459

点赞数 1

本文链接：https://blog.csdn.net/qq_31469369/article/details/52947607

版权

导航菜单最基本包括垂直菜单，水平菜单，圆角菜单，伸缩菜单，js特效自定义的菜单。圆角菜单。

上边的是效果图。

菜单由<ul>标签和<li>标签构成，html相关代码：

<div class="head">
	<ul>
		<li><a class="on" href="#">首页</a></li>
		<li><a href="#">旅行日记</a></li>
		<li><a href="#">我的图册</a></li>
		<li><a href="#">留言板</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
	</div>

这里我们设置为5个tab

*{margin:0 0;padding:0px;font-size:17px;}
.status{height:30px;}
.head{border-bottom:5px solid #2f5eea;}
.head ul{
	list-style:none;height:40px;margin-top:10px;padding-left:100px;width:710px;}
li{ float:left;}
a{display:block;text-decoration:none;width:120px;height:40px;;margin-left:1px;background:#EBEBEB;color:#333;text-align:center;line-height:40px;}
a.on,a:hover{background:url(http://ftp6072086.host529.zhujiwu.me/image/tab_bg.png) no-repeat;color: #fff;}