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

关注

原创最新推荐文章于 2026-05-08 12:30:57 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

CSS——CSS滑动门及其应用（制作微信导航栏） ※ 滑动门 先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 阅读详情

描述:

常用导航菜单样式:圆角背景,有分隔线,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;}

收录于