首页 > 开发 > CSS > 正文

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

2024-07-11 08:40:37
字体:
来源:转载
供稿:网友


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

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

  实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,如何实现这样的标签切换效果:
  1、首先要放置标签切换的容器,可以是选项卡形式,也可以是链接的形式;
  2、放置具体的内容,并默认显示其中的一个为显示状态。其它的内容则进行隐藏;
  3、当用户点击选项卡或链接时,应用javascript切换到指定的层进行显示,而其它的内容层进行隐藏;
  4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。

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


  本实例所用到的两张背景图片如下:



二、根据上面的思路我们开始整理HTML代码。我们作了如下规划:

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表