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

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 一个自动居中的导航条实例与相关问题 DIV+CSS

CSS样式表: DIV+CSS网页制作这种叫法不准确; CSS初学者入门:使用table布局网页不明智; xHTML+CSS网页制作和搜索引擎优化SEO的关系; CSS控制页面样式的4种方式和优先级问题; CSS入门教程:CSS选择器; CSS基础入门教程:CSS选择器规范化命名; CSS基础入门教程:理解盒子模型; CSS教程:2个重要概念块状元素和内联元素; CSS实例:盒模型、块状元素与内联元素、CSS选择器; css实例教程:理解Float的含义; CSS实例教程:清除浮动Clear; CSS网页制作教程:制作网页导航条; CSS实例教程:浮动(float)页面布局; CSS实例教程:定位(position)布局页面; CSS实例教程:用position来布局页面; CSS实例教程:CSS Hack; CSS制作网页技巧:单图片按钮实例; CSS网页制作入门实例:首行缩进两个文字; 2天掌握DIV+CSS网页制作技术; CSS网页定位教程:详细学习定位知识

No. « ‹ 104 105 106 107 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 162 ::

收藏到网摘: n/a

像table一样布局div 一个导航条布局的简单写法

这是我刚刚作的一个导航条，为了让那四个LINK居中，我这样作了，但作完后发现了很多的问题，写出来和大家分享一下！
首先我们先来看一下这个导航条！

点击运行可以看到效果:

<!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" />
<title>test zishu</title>
<style>
/*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; }
</style>
</head>
<body>
<div id="nav"> <ul><li><a href="http://www.kijiji.cn" target="_blank">首 页</a></li><li><a href="http://www.kijiji.cn/fabu" target="_blank">发布信息</a></li><li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">我的客齐集</a></li><li><a href="http://blog.kijiji.com.cn/help/" target="_blank">帮 助</a></li></ul>
</div>
<a href="http://www.zishu.cn" target="_blank">www.zishu.cn 子鼠</a> 2006-09-11 凌晨
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

问题：
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中很难看，你就凑合看吧！
再另外：我写的难免有问题，如果真有，你就指出来，我会非常高兴的！

像table一样布局div 一个导航条布局的简单写法

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

评论 (0) All

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