简单创建图片廊"/>
CSS简单创建图片廊
<!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简单创建图片廊
发布评论