快捷搜索:

CSS布局实例:CSS标签切换代码实例教程-CSS布局实

我们的设计越来越追求一种简洁的风格,盼望在有限的空间内展示更多的内容。与此同时我们发明一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容结构完毕。YAHOO与网易率先利用了标签切换的结构要领,突破了老例结构的局限性,在相同尺寸的区域内,可以放置更多的内容。我们只必要点击不合的选项卡或链接就能展开内容,这并不必要打开新的网页,只是在同一页内完成。

一、标签切换总体的实现思路:

实现这种标签切换的结构有多种要领,也传布着各类不合的代码,我们利用DIV CSS进行结构,首先来收拾一下思路,若何实现这样的标签切换效果:

1、首先要放置标签切换的容器,可所以选项卡形式,也可所以链接的形式;

2、放置详细的内容,并默认显示此中的一个为显示状态。其它的内容则进行暗藏;

3、当用户点击选项卡或链接时,利用javascript切换到指定的层进行显示,而其它的内容层进行暗藏;

4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。

我们看终极本实例的效果图片:

您可能还会对下面的文章感兴趣: