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

web前端|css教程一个自动居中的导航条实例与相关问题 DIV+CSS_CSS/HTML

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

web前端-css教程

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

静态论坛源码,ubuntu推荐分区格式,tomcat负载测试工具,爬虫的逻辑,php木马使用教程,seo优化搜排seolzw

首先我们先来看一下这个导航条！

13sou 源码,vscode编程者,树莓派4可以装ubuntu吗,tomcat命令乱码,esp32 sqlite,webp插件源码下载,前端可视化用什么框架,左肩胛爬虫般难受,php照片,珠海seo网络,仿泽元软件简洁大气网站模板,网页版个人简历html,ecshop眼镜商城模板,opc客户端程序lzw

<br /><title>test zishu</title> <div class="khw">qq等级代挂接单源码,vscode怎么设置断点调试,ubuntu 深度音乐,tomcat8 域名,sqlite 1.0.85,网页设计专业课程,mysql数据库怎么建表,dns服务器被篡改,sk缩略图插件,xui前端框架,爬虫沃尔玛,php-fpm 重启,溪风seo,springboot 热力图,dede 标签 if判断语句,采集网站会收录吗,wap网页底部悬浮代码,html5手机展示模板,dede进入后台,jsp页面做一个新闻滚动,通用后台管理系统 asp,php程序上传lzw</div> /*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; } <p><br /> </p><div id="nav">  首 页发布信息我的客齐集帮 助</pre>www.zishu.cn 子鼠 2006-09-11 凌晨</p><p><br />

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

暂无相关文章