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

今天，你将学习使用CSS3的另一个属性——:target来制作一个非常简单的动画手风琴的效果。在具体动手之前，我们一起来简单的了解一下这个“:target”。

CSS3target伪类的简介

CSS3target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如“#brand”，target就是用来匹配ID为“brand”的元素的。

现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

因为我们讨论的是有关于CSS3的属性，它支持所有现代浏览器，但在IE6-8下无法运行。因此今天我们这个效果在IE6-8下是无法正常运行。这是一件烦人的事情，因为IE所占份额还是相当的大的，但这并不会阻碍我们学习的热情。

我们可以先来看看今天我们要实现的效果：

HTMLMarkup:
<divclass="accordionMenu">
<divclass="menuSection"id="brand">
<h2><ahref="#brand">Brand</a></h2>
<p>contentforBrans</p>
</div>
<divclass="menuSection"id="promotion">
<h2><ahref="#promotion">Promotion</a></h2>
<p>contentforpromotion</p>
</div>
<divclass="menuSection"id="event">
<h2><ahref="#event">Event</a></h2>
<p>contentforEvent</p>
</div>
</div>
我使用了“div.accordionMenu”包装了手风琴所有块；
“div.menuSection”包含手风琴每块的标题和主内容
把手风琴每块的标题定义为“h2”
手风琴每块主内容放在了一个“p”中，并与“h2”相邻，当然大家也可以把主内容放置在一个“div”中，容易管理
此处最关键的一点是正如前面介绍“target”，我们使用“target”来达到点击展开动画效果，我们每一块需要ID来配合使用，因此我们在手风琴中的每一块中定义了一个ID号，并且在标题中的“<a>”链接的“href”属性链接了相对应块的ID号。

CSScode:
.accordionMenu{
font:12pxArial,Verdana,sans-serif;
color:#424242;
background:#fff;
padding:10px;
width:500px;
margin:0auto;
}
.accordionMenuh2{
margin:5px0;
padding:0;
position:relative;
}
.accordionMenuh2::before{
content:'';
border:5pxsolid#fff;
border-color:#ffftransparenttransparent;
width:0;
height:0;
position:absolute;
right:10px;
top:15px;
}
.accordionMenuh2a{
font-size:13px;
display:block;
font-weight:normal;
color:#424242;
text-shadow:2px2px2px#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:targeth2a{
background:#2288dd;
background:-webkit-line