[散分]CSS3实现隐藏与显示切换效果原型,该怎么解决
发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
[散分]CSS3实现隐藏与显示切换效果原型
转载请注明出处:css探索之旅;本文地址:CSS3实现隐藏与显示切换效果原型
这段时间html5,css3可谓大大的火了,什么apple与adobe的冲突,IE9 beta preview开放下载,并高调宣布支持html5与css3。这些消息都无疑将html5与css3推到了峰尖浪头。然而,当html5与css3正式被推出时,它们能为整个互联网带来什么呢,又能给web开发者,尤其是web前端开发者带来什么不同呢?
我想,当html5与css3正式发布时,将给整个业界带来的好处是显著的,至于那个度是多少,我也不能断下结论。
所以,我们都可以趁着现在去尝尝鲜,小小的把玩一下。
今天,分享一个用CSS3实现简单的显示与隐藏的切换效果。是的,这个效果是不需要通过JavaScript的。
你可以使用 Firefox3.6+ 及 Opera10.53+ 预览:DEMO:css实现显示与隐藏切换
以下是这个DEMO的基本HTML结构:
<div id="switch">
<a href="?" class="display">显示</a>
<a href="?" class="hide">隐藏</a>
<p class="cont">CSS3将带给互联网无限的精彩,很多遥不可及的事情将可信手拈来。</p>
</div>
CSS实现:
#switch .hide{display:none;}
#switch .cont{display:none;}
#switch .display:focus{display:none;}
#switch .display:focus + .hide{display:inline;}
#switch .display:focus ~ .cont{display:block;}
简单的数行代码就可以实现隐藏和显示,是不是给你带来些许激动了?虽说这个DEMO还不够让人满意,但广大人民的智慧是无限的,定能将之做得更加完美。
相信,更多新特性的展现会成为促使html5与css3的尽早推行的动力。因为,一切皆有可能。
------解决方案--------------------
这个不用css3吧
------解决方案--------------------
从这个效果来说,JS可以做到,不过如果未来纯CSS如果能实现这个效果就太赞了~~`` ^_^
------解决方案--------------------
似乎很不错啊
------解决方案--------------------
每天回帖即可获得10分可用分
------解决方案--------------------
有些诸如此类的事情,放在CSS里反而不便于查找页面对象的逻辑关系.
当然,如果是专人负责全部的DIV+CSS,别人不需要管的话,反而比较好.
开发中的诸多领域,越有更多规范和深入的细节,就越要求分工的细致.否则,就注定难尽其善了.
------解决方案--------------------
接分的来了
------解决方案--------------------
------解决方案--------------------
专业 接分
------解决方案--------------------
接分喽
------解决方案--------------------
接分。期待!
------解决方案--------------------
接分而已
------解决方案--------------------
回帖赚分,不回白不回,回了不白回
------解决方案--------------------
接分喽
------解决方案--------------------
HTML5我喜欢
------解决方案--------------------
看看,膜拜楼主
------解决方案--------------------
CSS 啊
------解决方案--------------------
keyi
------解决方案--------------------
就是一个切换吗?不过,还是不错的
------解决方案--------------------
太帅了,CSS3跟HTML5是完美的搭配,CSS3用如此简单的代码就能实现隐藏与现实。
可是中国用IE6的人还是很多,只要IE6不从我们视线中消失,网页设计师走的路还是很长,我们惊叹CSS3能简单实现圆角功能,我们竟然HTML5能实现FLASH的功能,但是我们却不能不兼顾老的浏览器。
或许网页设计师们应该发起一场淘汰IE6的运动,让更炫,更耳目一新的网页展现在我们面前。
------解决方案--------------------
太帅了,CSS3跟HTML5是完美的搭配,CSS3用如此简单的代码就能实现隐藏与现实。
------解决方案--------------------
------解决方案--------------------
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
CSS3的3D转换效果详解介绍
CSS3的3D转换效果详解介绍:
本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只...
-
HTML学习10:表单格式化
表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表੬...
-
CSS布局参考 IE的If条件注释使用备忘
内容提要:在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用! 关键字:Div CSS IE Hack...
-
CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同...
-
控制非模态弹出框(showModelessDialog)唯一且随父页面关闭
网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两...
-
compass模块----Utilities----Sprites精灵图合图
css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能...
-
求前端大神帮我看下我这网站,到底是什么原因。除了ie7和火狐其他浏览器都没问题。
http://120.25.1.133/digger/index.php/Home/In...
-
各位是怎样解决屏幕的分辨率的问题的呢?
我的笔记本是15.6英寸的,我开发的网页在我的电脑上看起来比较好,但是我想换一个大的屏幕的...
-
css-----强大的效果
1 <div id="d1">你好 2 <span>aaaaaaaaa</span> 3 <div> 4 <span id="s1">bbbbbbbb</span> 5 ...
-
新手关于canvas的问题
html代码:<canvasid="canvas"></canvas>
js代码:
第一种:varcanvas=$("#canvas");
第二种:varcanvas=$("#canva...