利用伪类创建图片相册

使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，从而避免使用js

<div id="gallery-container">
	<div class="gallery-item">
		<label for="gallery-item1" class="gallery-label"><img src="images/1s.jpg" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" />
		<img src="images/1.jpg" class="gallery-fullsize" />
	</div>
	<div class="gallery-item">
		<label for="gallery-item2" class="gallery-label"><img src="images/2s.jpg" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" />
		<img src="images/2.jpg" class="gallery-fullsize" />
	</div>
	<div class="gallery-item">
		<label for="gallery-item3" class="gallery-label"><img src="images/3s.jpg" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" />
		<img src="images/3.jpg" class="gallery-fullsize" />
	</div>
	<div class="gallery-item">
		<label for="gallery-item4" class="gallery-label"><img src="images/4s.jpg" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" />
		<img src="images/4.jpg" class="gallery-fullsize" />
	</div>
</div>

<style type="text/css">
h1{
	text-align: center;
}
#gallery-container {
	position: relative;
	width: 500px;
	height: auto;
	padding-top: 350px;
	padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 1px #aaaaaa solid;
}
img.gallery-fullsize {
	position: absolute;
	top: 15px;
	left: 50px;
	display: none;
}
div.gallery-item {
	display: inline-block;
}
input.gallery-selector {
	display: none;
}
label.gallery-label {
	cursor: pointer;
}
input.gallery-selector:checked ~ img.gallery-fullsize {
	display: block;
}
</style>

ps：类似的效果基于:hover伪类也可以实现哟——(●’◡’●)