响应式图片相册

最新推荐文章于 2024-06-09 09:40:42 发布

何方圆

最新推荐文章于 2024-06-09 09:40:42 发布

阅读量537

点赞数 1

分类专栏：前端文章标签： css html html5 前端 css3

本文链接：https://blog.csdn.net/weixin_45723705/article/details/115270045

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

废话少说，直接上代码，然后再详细介绍构造过程。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>响应式图片相册</title> 
<style>

* {/*设置全局格式*/
    box-sizing: border-box;/*并排放置两个带边框的框*/
}

div.img {
    border: 2px solid purple;/*设置图片外边框格式*/
}

div.img:hover {/*定义鼠标点击图片时的效果*/
    border: 3px solid red;
}

div.img img {/*设置图片大小*/
    width: 100%;
    height: auto;
}

div.desc {/*设置描述文本格式*/
    padding: 15px;
    text-align: center;
}

.responsive {/*设置默认格式下图片的尺寸*/
    padding: 0 6px;
    float: left;
    width: 24.99999%;/*修改图片的宽度，可并排放置四张图片*/
}

@media only screen and (max-width: 700px){/*若屏幕小于等于700px时的响应式设置*/
    .responsive {
        width: 49.99999%;/*并排放置两张图片*/
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){/*若屏幕小于等于500px时的响应式设置*/
    .responsive {
        width: 100%;/*并排放置一张图片*/
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

</style>
</head>
<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="210320104505-1.jpg">
      <img src="http://pic.jj20.com/up/allimg/1114/032021104505/210320104505-1.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="210320104505-3.jpg">
      <img src="http://pic.jj20.com/up/allimg/1114/032021104505/210320104505-3.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="210320104505-7.jpg">
      <img src="http://pic.jj20.com/up/allimg/1114/032021104505/210320104505-7.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="210320104505-6.jpg">
      <img src="http://pic.jj20.com/up/allimg/1114/032021104505/210320104505-6.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>

在这里插入图片描述

响应式设置

若屏幕小于等于700px

代码

@media only screen and (max-width: 700px){/*若屏幕小于等于700px时的响应式设置*/
    .responsive {
        width: 49.99999%;/*并排放置两张图片*/
        margin: 6px 0;
    }
}

在这里插入图片描述

若屏幕小于等于500px

代码

@media only screen and (max-width: 500px){/*若屏幕小于等于500px时的响应式设置*/
    .responsive {
        width: 100%;/*并排放置一张图片*/
    }
}

在这里插入图片描述
至此所有的步骤都已完成。

何方圆

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
响应式图片相册

废话少说，直接上代码，然后再详细介绍构造过程。代码<!DOCTYPE html><html><head><meta charset="utf-8"> <title>响应式图片相册</title> <style>* {/*设置全局格式*/ box-sizing: border-box;/*并排放置两个带边框的框*/}div.img { border: 2px solid purple;/
复制链接

扫一扫

专栏目录