CSS简单创建图片廊

最新推荐文章于 2023-09-20 08:53:45 发布

把怪物藏起来

最新推荐文章于 2023-09-20 08:53:45 发布

阅读量468

点赞数

分类专栏：前端内容文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_51929568/article/details/123125823

版权

前端内容专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>

把怪物藏起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简单创建图片廊

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .photo { margin: 5px; float: left; width: 200px; border: 1px solid gray;
复制链接

扫一扫