论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}列表UL、OL预设标记在FF与IE下方式不同的试验

文章类别:div+css布局 | 发表日期:2008-9-26 11:33:40

  列表UL或是OL中都有一个预设标记,这个标记可能是实点圆点,也可能是数字。在实际的应用中,我们需要去掉这个预设标记,但我们不清楚这个预设标记是存在于什么位置。因为IE与FF似乎在处理UL的预设标记时都有着不同的方式:我们来写一个UL的HTML代码结构:

HTML结构:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul>
<li>建设部通报八起房地产交易违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹威胁导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>

查看运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定一下CSS试着看一下IE与FF什么地方不一样:

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
ul {background:#ddd; padding:0; }

查看运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  现在只把padding的值设为0,这时我们看一下IE中除了多个背景之外并没有什么变化,但是FF中的预设标记不见了!这里要注重的是IE中的预设标记是在背景外的。我们再来换个方式来设置:

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
ul {background:#ddd; margin:0; }

查看运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  这里我们再看,情况相反,IE的预设标记不见了,而FF中的预设标记还在,这里要注重的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了,到底这是为什么呢?这个预设标记究竟是在什么地方的呢?下面我们通过一个实例来看一下UL的预设标记是在什么地方的!

HTML结构:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul>
<li>建设部通报八起房地产交易违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹威胁导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营 中国是最大受害国</li>
</ul>

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; }
li {background:#aaa;}

查看运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  这时我们看到,margin区域是最外围的白色部分,往里有点灰色的是border,再往里是更深一点的灰色,这个区域是padding,最深的区域是内容区。而预设标记正处在padding的区域,那么是不是说把padding区去掉这个预设标记就会消失呢?我们把CSS做一下修改:

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; }
li {background:#aaa;}

查看运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们把padding设为0后发现预设标记依然还在,不过这时他处在了border的上面,那么我们可以根据上面推测出预设标记并不存在于margin,padding或是border中,margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。

  那么这时我们大致上可能已经理解了,其实IE与FF对于UL的默认值的设定是不一样的,IE给了UL一个margin值,但是却没有给padding值,所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值,所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚,这个预设标记点不属于paading也不属于margin。他只属于内容部分,他一直是在内容的外边缘,当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》

  通过上面的例子我们清楚了,想要让这个预设标记消失光用margin:0;与padding:0;因为假如出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是:margin:0; padding:0; list-style:none;

  虽然预设标记很不错,但是却没办法精确控制,所以在实际应用中并不推荐使用,还是用背景图来代替!
  本文作者:小毅
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058