CSS3制作手风琴——CSS3 :target的应用

前一回我在《CSS3制作垂直手风琴》介绍了使用“:hover”来制作手风琴效果。今天,你将学习使用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="accordionMenu">
				<div class="menuSection" id="brand">
					<h2><a href="#brand">Brand</a></h2>
					<p>content for Brand</p>
				</div>
				<div class="menuSection" id="promotion">
					<h2><a href="#promotion">Promotion</a></h2>
					<p>content for promotion</p>
				</div>
				<div class="menuSection" id="event">
					<h2><a href="#event">Event</a></h2>
					<p>content for Event</p>
				</div>
			</div>
		
  1. 我使用了“div.accordionMenu”包装了手风琴所有块;
  2. “div.menuSection”包含手风琴每块的标题和主内容
  3. 把手风琴每块的标题定义为“h2”
  4. 手风琴每块主内容放在了一个“p”中,并与“h
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/blog/160.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部