没有合适的资源?快使用搜索试试~ 我知道了~
CSS标签切换代码实例教程 比较漂亮.
5星 · 超过95%的资源 需积分: 9 37 下载量 28 浏览量
2009-07-20
16:36:07
上传
评论 2
收藏 43KB DOC 举报
温馨提示
试读
6页
我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时我们发现一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕。YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成。
资源推荐
资源详情
资源评论
CSS 标签切换代码实例教程 比较漂亮
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/12339.htm
我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容。与此同时
我们发现一些问题,内容的简单排列总使页面很长。滚屏很多才能将显示的内容布局完毕
YAHOO 与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸
的区域内,可以放置更多的内容。我们只需要点击不同的选项卡或链接就能展开内容,这
并不需要打开新的网页,只是在同一页内完成。
一、标签切换总体的实现思路:
实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用 DIV CSS
进行布局,首先来整理一下思路,如何实现这样的标签切换效果:
1、首先要放置标签切换的容器,可以是选项卡形式,也可以是链接的形式;
2、放置具体的内容,并默认显示其中的一个为显示状态。其它的内容则进行隐藏;
3、当用户点击选项卡或链接时,应用 javascript 切换到指定的层进行显示,而其它的
内容层进行隐藏;
4、进行后期深入,例如,去除链接虚线与内容层图文的美化等。
我们看最终本实例的效果图片:
二、根据上面的思路我们开始整理 HTML 代码。我们作了如下规划:
<div class="woaicss">
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
</ul>
<div class="woaicss_con" id="woaicss_con1" style="display:block;">
</div>
<div class="woaicss_con" id="woaicss_con2" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con3" style="display:none;">
</div>
<div class="woaicss_con" id="woaicss_con4" style="display:none;">
</div>
</div>
1、我们布置一个总体的容器,并应用类 woaicss。
2、设置一个无序列表 UL 作为选项卡或链接的容器(下面详细介绍)。
3、我们分别设置了四个层,作为内容层(我们假想有四个切换)。请特别注意这四个
层均应用了类
woaicss_con。与此同时为他们分别指定了不同的 id。这是为了让 javascript 可以进行控制。
我们设置第
一个层的样式为块元素,即显示出该内容层。而其它三层均进行了隐藏。
三、我们开始进一步完善 HTML 代码。无序列表 UL 增加一些链接:
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(1)">52CSS.com</a></li>
<li><a href="javascript:void(0)" onclick="javascript:woaicssq(2)">Div CSS 教程
资源评论
- NaSaga2013-06-09赞!拿回来研究下
hejinjinhelili
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 什么是移动应用开发-关于移动应用开发的相关介绍
- 第二组汇报 PPT.pptx
- 什么是大数据开发-相关介绍-关于大数据开发的相关介绍
- 什么是软件测试-相关介绍-关于软件测试的相关介绍
- 前端开发-什么是前端开发-关于前端开发的一些相关介绍
- Sora AI-关于文生视频的使用场景说明
- suno AI文生视频的相关教程和介绍使用
- 什么是后端开发-关于后端开发的一些小介绍分享
- Jurassic Pack Vol. II Dinosaurs 侏罗纪包卷恐龙二号Unity游戏模型资源unitypackage
- Jurassic Pack Vol. III Dinosaurs 侏罗纪包卷恐龙三号Unity游戏模型资源unitypackag
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功