admin管理员组文章数量:1794759
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简单创建图片廊 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968762a123601.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论