CSS3制作手风琴——CSS3 target的应用.docx

今天，你将学习使用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