用CSS实现Tab导航

本文主要讨论的就是导航tab的底部灰线如何用CSS实现,而不是用背景图片实现。用CSS实现的好处是可以避免浏览器发起一次图片请求,另一个是可以方便地改变颜色、尺寸。 做法是用ul和li标签生成tab,在ul的外部用p标签包围,导航底部的那条细线,就是p标签的bottom-border。 过程中遇到的一个难题是,高亮的tab,是白色背景,该tab底部没有border,应该也是白色的。但用普通的方法没法做到,如上面第2个图,“首页”那个tab的出现了底部border。因为p标签是ul和li的外层容器,内部的所有元素默认都在p标签的范围内,无法跨越p的边界。 通常这种导航的底部实现都是用背景图片代替,这样的理由是:1、背景图片的位置可调,可以不用紧紧挨着边框,比如离bottom有4px的距离;2、背景图片显示在最低层,p容器内的任何元素都可以覆盖住背景图片。高亮tab的底部没有border的效果就是靠白色背景挡住了p的背景图片做到的。 基于这种思想,我考虑可以用什么方式让内部元素挡住外层元素呢? ul元素的position属性设置为absolute,p标签的position设置为relative。这样ul就定义在p标签内浮动,默认top和left都是0,即p的左上角。同时,ul会覆盖住p。只要p的height刚好比ul的height小1px就可以,也就是让ul中li的bottom-border刚好和p的bottom-border在同一个垂直高度上。注意,p标签的overflow属性必须是visible(默认值),也就是说只要你不把overflow设置成其他值就没问题。 经过上面的步骤,可以总结出几个关键点,按重要顺序排列: ul和p的position属性,分别是absolute和relative(这里告诉你为什么这样设置) p的高度应该比ul小1px(根据你的需要,小几个px都可以) overflow属性必须使用visible 通过这几个关键点,你就可以基本实现图1的效果,不过还要针对不同浏览器做小小的css hack。 hack的关键点就是p的height值,在我这里,Firefox2/3、Chrome、Opera适合27px,IE7、Safari适合26px,IE6适合25px。 现在我唯一的问题是不知道怎么写出专门适用于Safari的CSS定义,所以在Safari下是图3的效果,其实就差1px,回头找到方法再补充吧。

DIV CSS 简要教程

  当我们进行CSS+DIV的方式来重构我们的 html页面时,通常会发现一些是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误:   1.检查HTML元素(如:<ul>、<div>)、属性(如:class=””)是否有拼写错误、是否忘记结束标记(如:<br />)   因为Xhtml 语法比较严格,诸如Firefox 之类的浏览器如果检查发现Xhtml里面有语法错误,那页面是不能正常显示的。即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。   2. 检查CSS是否正确   检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。   3. 确定错误发生的位置   如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。 […]