CSS 基础学习-206 CSS创建图片库

由 hrs, 17 八月, 2023

实例代码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		.divimg {
			float:left;
			margin:5px;
			background-color:#f1f1f1;
			}
		.divimg img{
			width:300px;
			height:200px;
			display:block;
		}
		.divname{
		text-align:center;
		}
		.divimg:hover{
			
			border:1px solid black;

		}
		</style>
	</head>
	<body>
			<div class="divimg">
				<a target="blank" href="img/flower01.jpg">
				<img src="img/flower01.jpg">
				</a>
				<div class="divname"><p>一品香</p></div>
			</div>
			<div class="divimg">
				 <a target="blank"href="img/flower2.jpeg">
					<img src="img/flower2.jpeg">
                  </a>
				  <div class="divname"><p>白菊花</p></div>
		    </div>
			<div class="divimg">
			<a  target="blank" href="img/flower3.jpeg"><img src="img/flower3.jpeg">
				</a>
				<div class="divname"><p>百合花</p></div>
		</div>
		<div class="divimg">
			<a  target="blank" href="img/flower4.jpeg">
				<img src="img/flower4.jpeg">
			</a>
			<div class="divname"><p>牡丹花</p></div>
			</div>
	</body>
</html

运行效果：

 

标签

评论