- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS3制作手风琴——CSS3 target的应用
今天,你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前,我们一起来简单的了解一下这个“:target”。CSS3 target伪类的简介CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如“#brand”,target就是用来匹配ID为“brand”的元素的。现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。因为我们讨论的是有关于CSS3的属性,它支持所有现代浏览器,但在IE6-8下无法运行。因此今天我们这个效果在IE6-8下是无法正常运行。这是一件烦人的事情,因为IE所占份额还是相当的大的,但这并不会阻碍我们学习的热情。我们可以先来看看今天我们要实现的效果:HTML Markup : div class=accordionMenudiv class=menuSection id=brandh2a href=#brandBrand/a/h2pcontent for Brans/p/divdiv class=menuSection id=promotionh2a href=#promotionPromotion/a/h2pcontent for promotion/p/divdiv class=menuSection id=eventh2a href=#eventEvent/a/h2pcontent for Event/p/div/div我使用了“div.accordionMenu”包装了手风琴所有块;“div.menuSection”包含手风琴每块的标题和主内容把手风琴每块的标题定义为“h2”手风琴每块主内容放在了一个“p”中,并与“h2”相邻,当然大家也可以把主内容放置在一个“div”中,容易管理此处最关键的一点是正如前面介绍“target”,我们使用“target”来达到点击展开动画效果,我们每一块需要ID来配合使用,因此我们在手风琴中的每一块中定义了一个ID号,并且在标题中的“a”链接的“href”属性链接了相对应块的ID号。CSS code : .accordionMenu {font:12px Arial,Verdana,sans-serif;color:#424242;background:#fff;padding:10px;width:500px;margin:0 auto;}.accordionMenu h2 {margin:5px 0;padding:0;position:relative;}.accordionMenu h2::before {content:;border:5px solid #fff;border-color:#fff transparent transparent;width:0;height:0;position:absolute;right:10px;top:15px;}.accordionMenu h2 a {font-size:13px;display:block;font-weight:normal;color:#424242;text-shadow:2px 2px 2px #aeaeae;text-decoration:none;margin:0;padding:10px;background:#8f8f8f;background:-webkit-linear-gradient(top, #cecece, #8f8f8f);border-radius:5px;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f); }.accordionMenu :target h2 a {background:#2288dd;background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);color:#FFF;}.accordionMenu p {padding:0 10px;margin:0;height:0;overflow:hidden;transition:height 0.5s ease-in;}.accordionMenu :target p {overflow:auto;height:100px;}.accordionMenu :target h2::before {bord
您可能关注的文档
- Graphics-类画图方法.doc
- 4BM3U2教案.doc
- 70-536-(2012第三套).docx
- Unit12 I remember meeting all of you in Grade 6. 导学案.doc
- 2000.1-2008.6历年六级完型填空.doc
- 观唐楼书文案全.doc
- 英汉语言对比分析期末考试资料 - 副本.doc
- grade7---中.doc
- bilibili高级弹幕代码初阶教程.doc
- jfreechart教材1.doc
- 北师 九下 数学 第1章《三角函数的应用》课件.pptx
- 人教 八下 英语 Unit 2《Period 1 Section A(1a-2d)》课件.pptx
- 北师 九下 数学 第2章《二次函数的应用》课件.pptx
- 华师 九下 数学 第26章 二次函数《二次函数y=ax+bx+c的图象和性质 第4课时》课件.pptx
- 人教 八下 英语 Unit 1《Period 2 Section A(3a-3c)》课件.pptx
- 人教 八下 英语 Unit 2《Period 3 Section A(Grammar Focus-4c)》课件.pptx
- 华师 八下 数学 第18章 平行四边形《平行四边形的判定(2)》课件.pptx
- 华师 八下 数学 第19章 矩形、菱形与正方形《矩形的性质》课件.pptx
- 人教 八下 英语 Unit 2《Period 4 Section B(1a-1e)》课件.pptx
- 人教 八下 英语 Unit 1《Period 6 Section B(3a-Self Check)》课件.pptx
文档评论(0)