当前位置:  编程技术>WEB前端

一个自动居中的导航条实例与相关问题 DIV+CSS

    来源: 互联网  发布时间:2014-09-06

    本文导语:  这是我刚刚作的一个导航条,为了让那四个LINK居中,我这样作了,但作完后发现了很多的问题,写出来和大家分享一下! 首先我们先来看一下这个导航条! test zishu /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-fa...

这是我刚刚作的一个导航条,为了让那四个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(/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(/blog_article/nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement.clientWidth 

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 图片垂直居中之姊妹 DIV垂直居中
  • Python GUI编程:tkinter实现一个窗口并居中代码
  • JQuery实现元素屏幕居中显示的代码
  • 用css实现图片垂直居中的使用技巧
  • 在IE与FF中如何居中的css写法
  • 如何让JFrame居中! iis7站长之家
  • 怎么让JFrame居中显示???
  • css布局网页水平居中常用方法
  • jquery实现弹出层完美居中效果
  • 未知大小图片在容器的垂直和水平居中问题
  • 各位老大,让我的JFrame在屏幕上居中,应用哪个方法?!小弟感激不尽!
  • ○ ● -- 如何将窗口居中?(Qt) -- ● ○
  • 如何让JFrame居中!
  • 未知大小图片在已知容器中的垂直和水平居中问题
  • CSS如何使DIV层居中
  • 任何使窗口居中显示。
  • CSS网页布局入门教程7:二列固定宽度居中
  • 如何使JTextField中输入的文字居中显示
  • <font color=blue>让2个DIV居中并排显示
  • CSS网页布局入门教程3:一列固定宽度居中




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3