編碼的世界 / 優質文選 / 生涯

CSS：淘寶商品展示樣式

2022年5月26日
-   

效果圖代碼
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>





		<style type="text/css">
			.bg,.content {
				width: 730px;
				height: 454px;
			}
			.bg img{
				position: absolute;
			}
			.content img {
				width: 19%;
			}
			:target {
				z-index: 1;
			}
			
		</style>
	</head>
	<body>
		<div class="bg">
			<img src="img/jd001.jpg" id="jd1"/>
			<img src="img/jd002.jpg" id="jd2"/>





			<img src="img/jd003.jpg" id="jd3"/>
			<img src="img/jd004.jpg" id="jd4"/>
			<img src="img/jd005.jpg" id="jd5"/>
		</div>
		<div class="content">
			<a href="#jd1"><img src="img/jd001.jpg"/></a>
			<a href="#jd2"><img src="img/jd002.jpg"/></a>
			<a href="#jd3"><img src="img/jd003.jpg"/></a>
			<a href="#jd4"><img src="img/jd004.jpg"/></a>
			<a href="#jd5"><img src="img/jd005.jpg"/></a>
		</div>
	</body>
</html>

熱門文章