一个自动居中的导航条实例与相关问题 DIV+CSS
2006-09-28 00:00
513 查看
这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下!
首先我们先来看一下这个导航条!
test zishu
/*zishu.cn*/
*{ margin:0; padding:0;}
body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;}
a:link,a:visited{color:#000; text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;}
#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;}
#nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;}
#nav li a{margin:1px;}
p{ margin:50px 0; text-align:center; }
首 页发布信息我的客齐集帮 助
www.zishu.cn 子鼠 2006-09-11 凌晨
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
问题:
1、空格BUG出现我FIREFOX中,不知道为什么,如果把LI分不写在同一行,问题就出来了,你可以在上边运行代码中试一下!
2、IE和FIREFOX的微小区别(看下图),如果你没有发现这小小的区别,你就不会在CSS中写成padding:6px 15px 5px 15px; 也就永远不会把中间的竖线和上下两条线连在一起!(这其中IE6和IE7还有更微小的区别);
3、#nav li a{margin:1px;}这行是不是没有用?如果你这样认为你就删了试一下,看行不行!
4、页面在缩放到一定小时会折行,FIREFOX中用min-width解决,而IE中min-width不认识,所以只有用:expression((documentElement.clientWidt.....来解决了!我在上边的代码中没有加,如果你不想折行就把上边#nav这行改成:
程序代码
基本就这行多问题,建议自已作一下,这样你会发现特别多的问题!
另外:这篇BLOG会在FIREFOX中很难看,你就凑合看吧!
再另外:我写的难免有问题,如果真有,你就指出来,我会非常高兴的!
首先我们先来看一下这个导航条!
test zishu
/*zishu.cn*/
*{ margin:0; padding:0;}
body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;}
a:link,a:visited{color:#000; text-decoration: none;}
a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;}
#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;}
#nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;}
#nav li a{margin:1px;}
p{ margin:50px 0; text-align:center; }
首 页发布信息我的客齐集帮 助
www.zishu.cn 子鼠 2006-09-11 凌晨
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
问题:
1、空格BUG出现我FIREFOX中,不知道为什么,如果把LI分不写在同一行,问题就出来了,你可以在上边运行代码中试一下!
2、IE和FIREFOX的微小区别(看下图),如果你没有发现这小小的区别,你就不会在CSS中写成padding:6px 15px 5px 15px; 也就永远不会把中间的竖线和上下两条线连在一起!(这其中IE6和IE7还有更微小的区别);
3、#nav li a{margin:1px;}这行是不是没有用?如果你这样认为你就删了试一下,看行不行!
4、页面在缩放到一定小时会折行,FIREFOX中用min-width解决,而IE中min-width不认识,所以只有用:expression((documentElement.clientWidt.....来解决了!我在上边的代码中没有加,如果你不想折行就把上边#nav这行改成:
程序代码
#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth < 400) ? "400px" : "auto" );}
基本就这行多问题,建议自已作一下,这样你会发现特别多的问题!
另外:这篇BLOG会在FIREFOX中很难看,你就凑合看吧!
再另外:我写的难免有问题,如果真有,你就指出来,我会非常高兴的!
相关文章推荐
- 一个自动居中的导航条实例与相关问题 DIV+CSS
- CSS解决DIV居中相关问题
- PHP学习之Smarty+CSS+DIV页面居中问题
- IE css DIV 居中问题
- 解决XHTML中DIV+CSS布局时不能居中的问题
- div+Css三列布局中的一个小问题
- CSS问题1:div中 li宽度不固定 ie6和ie7不兼容不自动换行
- css 关于ul在div里居中且平铺的问题
- DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
- 一个div在页面居中的css写法
- 一个导航条的效果DIV+CSS
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 比较漂亮的一个导航条的效果DIV+CSS
- css中关于div中文本垂直居中的问题。
- css 文字自动换行并垂直居中div效果
- 解决在IE8浏览器下css+div网页不能居中的问题
- css让一个div水平垂直居中方法大全
- 如何一个td或table里的图片等比例缩小(css问题)图片自动缩放
- 关于CSS控制DIV水平居中问题
- css使图片自动适应div的宽度变化---解决最大宽度问题