当前位置：移动技术网 > IT编程>网页制作>CSS > 一个自动居中的导航条实例与相关问题 DIV+CSS

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

2017年12月12日 | 移动技术网IT编程 | 我要评论

这是我刚刚作的一个导航条，为了让那四个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></li><li></li><li></li><li></li></ul> 
</div> 
<p> 2006-09-11 凌晨</p> 
</body> 
</html>

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

【css】利用line-height实现垂直居中

替换元素与非替换元素<body> <div>hello</div> &l... [阅读全文]
通过鼠标使图片交替显示

伪类 after、before、hovercss代码使用的是预编译less，简单分享：就是固定框200*200，... [阅读全文]
荐微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

一、前言项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次，是基于微信小程序开发... [阅读全文]
【剑指 Offer 31】栈的压入、弹出序列

题目题目链接输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有... [阅读全文]
前端学习笔记（3）之css文本属性合集

文本模块缩进text-intent间距 xxx-spacing控制文本大小写 text-transform文本... [阅读全文]
CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 css 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 codepen 时看... [阅读全文]
css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!doctype html><html... [阅读全文]
CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-st... [阅读全文]
深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-... [阅读全文]
CSS中的四种定位区别详解

我们都知道，前端开发里面的css中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和... [阅读全文]

网友评论


验证码：

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

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论