CSS实现背景图片不规则的导航菜单
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示:
(图一)
当鼠标移上去的时候背景变成红色箭头,也许,咋一看,觉得这个效果并没有什么特别的地方,但是仔细看看我画上去的绿色框框部分,就会发现每一块都是接在一起的不会断开的;如果说按照普通方法来做,那么实现的可能是下图所示的效果:
(图二)
即是块与块之间是断开的。
<!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"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
CSS实现背景图片不规则的导航菜单相关推荐
- html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...
- html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码 这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
- 用css控制背景图片的位置,大小
引用连接:http://hi.baidu.com/dengdan1025/blog/item/c3463bfba4c3969158ee90d5.html 对于图片,首先我们先想到是背景图片.因为我们许 ...
- JS+CSS实现漂亮实用的红色导航菜单
代码简介: 强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的"下拉"菜单,应该叫滑出菜单吧?反正 ...
- php 菜单目录树,css实现的目录树型导航菜单
我这个导航效果是在纵向导航菜单制作的基础上,加入鼠标点击主目录的显示隐藏效果,修改的是DIV代码: onClick="document.getElementByIdx_x('child1') ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
- background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
最新文章
- 使用第三方SDK(如微信、qq、快看、头条等),调用接口405 Method Not Allowed
- 【分享】博客美化(6)为你的博文自动添加目录【转】
- 数学与编程:“概率论”总结
- 【Vulnhub靶机系列】DC1
- 谓词筛选表达式的扩展库PredicateLib
- Python深浅拷贝辨析
- Bootstrap 3 与 Foundation 5 的区别
- python模拟手机充值场景_appium+Python实例(二)模拟新建场景表(辅助测试执行)...
- SAP License:ERP概述
- 中国石油大学c语言程序设计答案,中国石油大学《C语言程序设计》期末复习题和答案.doc...
- 并发编程学习之线程池
- 【“计算机科学与技术”专业小白成长系列】Peter Norvig:十年学会编程
- python反爬中url之aes加密_python反爬之前端加密技术
- 1647120-04-4,c(Bua-Cpa-Thi-Val-Asn-Cys)-Pro-d-Arg-NEt2 acetate多肽
- 刷题日记-SQL 查找最晚入职员工的所有信息
- 私有云厂商云宏破解金融行业转型“数字底座”难题
- 剪裁头像裁剪遇到关于小米华为适配问题的解决
- 什么叫五口POE交换机 五口POE交换机使用方法
- datadashboard下载_Data Dashboard for LabVIEW app下载
- STC15W单片机防丢语音报警GPS北斗定位测距双机LORA无线手持可充电