CSS_导航菜单_导航1(滑动门)

最新推荐文章于 2022-09-19 11:50:13 发布

trace332

最新推荐文章于 2022-09-19 11:50:13 发布

阅读量1.4k

点赞数 2

分类专栏： code box 文章标签： css url float class html ie

本文链接：https://blog.csdn.net/trace332/article/details/4283483

版权

code box 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

描述:

常用导航菜单样式:圆角背景,有分隔线,HOVER时背景图变高,滑动门

效果图:

HTML:

<div class="nav"> <ul> <li><a href="#" mce_href="#" title="" class="cur">网站首页首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> <li><a href="#" mce_href="#" title="">网站首页</a></li> </ul> </div>

CSS:

* { margin:0 ; padding:0;} ul , ul li { list-style:none;} a { text-decoration:none; font-size:12px;} /* 导航 */ .nav { padding-left:38px; width:871px; height:38px; background:url(images/nav-bg.png) no-repeat left 10px; /*背景两边都是圆角,直接做成一张图片*/ } .nav ul li { float:left; padding:0 5px 0 3px; /* 留一些补白,这里分隔线和黑色背景有一些距离!!! */ background:url(images/divline.png) no-repeat right 11px;展览/*元素之间的分隔线*/ } .nav ul li a{ padding-left:5px; float:left; /*for IE6*/ height:38px;line-height:50px; /* 因为HOVER时导航项变高,所有这里高度和行高是不一样的 */ color:#000;} .nav ul li a:hover { text-decoration:none; line-height:45px; /*HOVER时,字升高一些*/ color:#000; background:url(images/nav-cur-l.png) no-repeat left 4px;} /*左圆角图片*/ .nav ul li a span{ float:left; padding:0 17px 0 12px; } .nav ul li a:hover span{ color:#fff; background:url(images/nav-cur-r.png) no-repeat right 4px;} /*右圆角图片*/ .nav ul li a.cur { color:#fff; line-height:45px; background:url(images/nav-cur-l.png) no-repeat left 4px;} .nav ul li a.cur span{ padding:0 20px; background:url(images/nav-cur-r.png) no-repeat right 4px;}