<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
.photo {
margin: 5px;
float: left;
width: 200px;
border: 1px solid gray;
}
img {
width: 200px;
height: auto; /*height:auto，是指根据块内内容自动调节高度。 height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。*/
}
.photo:hover {
border: 1px solid black;
}
.text {
text-align: center;
}
</style>
</head>
<body>
<div class="photo">
<div class="imgs">
<a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
</div>
<div class="text">这里添加图片文本描述</div>
</div>
<div class="photo">
<div class="imgs">
<a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
</div>
<div class="text">这里添加图片文本描述</div>
</div>
<div class="photo">
<div class="imgs">
<a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
</div>
<div class="text">这里添加图片文本描述</div>
</div>
<div class="photo">
<div class="imgs">
<a href="#"><img src="D:/vscode/vs/image/bg.png"></a>
</div>
<div class="text">这里添加图片文本描述</div>
</div>
</body>
</html>
更多推荐
CSS简单创建图片廊
发布评论