CSS实现背景图片不规则的导航菜单
来源:互联网 发布:淘宝客转链工具 编辑:程序博客网 时间:2024/05/17 08:38
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示:
(图一)
当鼠标移上去的时候背景变成红色箭头,也许,咋一看,觉得这个效果并没有什么特别的地方,但是仔细看看我画上去的绿色框框部分,就会发现每一块都是接在一起的不会断开的;如果说按照普通方法来做,那么实现的可能是下图所示的效果:
(图二)
即是块与块之间是断开的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动!!!--> <!--[if IE 6]> <script src="js/ie_png.js" mce_src="js/ie_png.js"> </script> <script type="text/javascript"> DD_belatedPNG.fix('.previous,img'); </script><![endif]--> <style type="text/css">body{ font-size:12px; font-family:Arial, Helvetica, sans-serif;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; list-style:none;} body img{ border:none;}a{ color:#000; border:0; text-decoration:none;}a:hover{ color:#f00; text-decoration:none;}#warp{ margin:20px auto; width: 960px;}body{ background:url(img/bj.jpg) no-repeat center top #090909;}.nav{ background:url(img/nav_bj.png) right no-repeat; _background:url(img/nav_bj.gif) right no-repeat; height:47px; width:638px;}.nav ul li{ float:left; margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/ display:inline; width:104px;}.nav ul li a{ display:block; color:#FFFFFF; padding:7px 0px; _padding:5px 0px 6px; width:104px; float:left; text-align:center; font-family:Microsoft YaHei !important;}.nav ul li a span{ display:block;}.nav ul li a:hover{ background:url(img/a_hover.png) no-repeat; _background:url(img/a_hover.gif) no-repeat; color:#fff;}.nav ul .home a:hover{ background:url(img/home_hover.png) 7px center no-repeat; _background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body> <div id="warp"> <div class="nav"> <ul> <li class="home"><a href=""><span>Home</span>首页</a></li> <li><a href=""><span>About</span>关于九弘</a></li> <li><a href=""><span>Serve</span>服务项目</a></li> <li><a href=""><span>Case</span>活动案例</a></li> <li><a href=""><span>Information</span>公司动态</a></li> <li><a href=""><span>Partners</span>合作伙伴</a></li> <li><a href=""><span>Contact</span>联系方式</a></li> </ul> </div> </div></body></html>
在这个效果的实现过程中最关键的地方就是把“li”的margin值左右两边设为负数,然后把“li”和”a“的宽度设成一样,这样”a“的宽度就是固定的了,而”li“左右两边因为有margin,所以会缩小。
源码下载地址:http://files.cnblogs.com/bokin/nav.rar
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- CSS实现背景图片不规则的导航菜单
- 完全用CSS实现的导航菜单
- CSS实现三级菜单导航
- 导航下拉菜单Css实现
- 背景图片美化导航菜单
- 完全用CSS实现的中英文双语导航菜单
- 用css实现了一个精致的纵向导航菜单
- 用css实现了一个精致的纵向导航菜单
- CSS技术结合图像实现动态效果的菜单导航
- 完全用CSS实现的中英文双语导航菜单
- CSS实现导航条图片的翻转菜单
- CSS实现导航条图片的翻转菜单
- 采用jquery+css实现极酷的下拉菜单导航
- 纯CSS实现六边形布局的导航菜单
- 纯css实现导航菜单的垂直伸缩
- 倾斜的css导航菜单
- CSS:导航菜单的制作
- 导航菜单的实现
- Google Maps Api 多坐标分类标记,在地图上显示海量坐标,并分组显示。
- spring setter方法依赖注入(DI)原理
- C#中FTP上传下载
- tq2440 lcd 移植
- OpenLayers学习笔记二
- CSS实现背景图片不规则的导航菜单
- 【面试题】用C模拟C++的多态特性
- WPF里的DependencyProperty(2)
- 浏览器可以注册的事件
- 进程通信的五个种类
- 0040算法笔记——【分支限界法】批处理作业调度问题
- Spring mvc3的ajax
- php函数返回值
- java如何获取SQL查询结果集中的行数和列数