首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
Float 菜单水平居中简单方法
所属分类:
网页制作
/
CSS
阅读数: 587
收藏 0
赞 0
分享
我这里还有更简单的办法,先展示:
其实我外面应该再套一个div,但为了减少碳排放,舍弃。
<!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=gb2312" /><style type="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;border:solid 1px red;padding:20px;}#navigation li{height:30px;float:left;}#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}#navigation li a:hover{background:#59c099;color:#fff;}</style><!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]--><title>float菜单局中一法</title></head><body><ul id="navigation"><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Store</a></li><li><a href="#">Group</a></li><li><a href="#">Community</a></li><li><a href="#">Help</a></li></ul></body></html>
提示:您可以先修改部分代码再运行
其中最为关键的是这一句:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
为了照顾较低版本IE,这里使用了条件注释,感觉在IE7以下中,display:inline;的作用就相当于inline-block;。
根据上面代码进化而来的滑动门导航:
<!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=gb2312" /><style type="text/css">body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}ul{margin:0;padding:0;list-style:none;}#navigation{display:inline-block;padding:20px;border:solid 1px red;}#navigation li{height:30px;float:left;}#navigation li a{float:left;background:#97C099 url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) left top no-repeat;padding-left:27px;height:30px;overflow:hidden;}#navigation li a span{height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}#navigation li.current a{font-weight:bold;}</style><!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]--><title>根据上面代码升级为滑动门样式</title></head><body><ul id="navigation"><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>News</span></a></li><li class="current"><a href="#"><span>Store</span></a></li><li><a href="#"><span>Group</span></a></li><li><a href="#"><span>Community</span></a></li><li><a href="#"><span>Help</span></a></li></ul></body></html>
提示:您可以先修改部分代码再运行
其中,这两句有必要说明一下,以免被认为是多余的:
复制代码
代码如下:
#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px,不是3px bug哈!因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */
#navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外,IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/
完工了,缺点就是,写那一行条件注释,对于有xhtml洁癖的人来说,就像眼里的沙子,想除掉,那就使用hack也无妨!呵呵!
在safari4,chorme,opera10,ie5.5、5、6、7,ff3中均暂未发现问题。
更多精彩内容
其他人还在看
CSS样式分离之再分离达到精简与重用
无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有
评论 0
收藏 0
赞 0
分享
CSS属性behavior的语法使用说明
在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
评论 0
收藏 0
赞 0
分享
网页制作中的水平居中和垂直居中解决方法集合
在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。
评论 0
收藏 0
赞 0
分享
最常见IE的Bug及其fix修复方法
Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。
评论 0
收藏 0
赞 0
分享
CSS常用浏览器兼容调整小结
用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……
评论 0
收藏 0
赞 0
分享
css firefox火狐浏览器下的兼容性问题
css firefox火狐浏览器下的兼容性问题
评论 0
收藏 0
赞 0
分享
DIV+CSS 浏览器兼容性小结
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
评论 0
收藏 0
赞 0
分享
div+css 布局常识 8问
CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天jb51.net收集了常见的8条面试题目,希望对您有所帮助。
评论 0
收藏 0
赞 0
分享
CSS用四种方式实现布局
CSS用四种方式实现布局
评论 0
收藏 0
赞 0
分享
css 解决表格边框不显示的问题
在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
青西一女子轻信网络刷单2小时赚400元 被骗15万元
怎么用互联网思维的做餐饮?
巴西世界杯复盘:七大移动营销案例图文解析
四年的网赚经验
Google
为什么做网站不赚钱?做网站不赚钱的三大原因
站长故事
更多
从地图到苹果6!盘点苹果产品的四大败笔
阿里会成为下一个谷歌?谁是Google真正的挑战者
比较适合个人站长的5种类型网站:定位 坚持 收益
做站7年
一个新手站长的几年seo外链过程
做好网站维护 持续吸引用户浏览