一、以下是使用 CSS 创建图片廊：
效果就是“这样的点击图片之后，就可以打开新的页面显示高清图片了”
<div class="responsive"> <div class="img"> <a href="../image/view1.jpg" target="_blank"> <img src="../image/view1.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="../image/view2.jpg" target="_blank"> <img src="../image/view2.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="../image/view6.jpg" target="_blank"> <img src="../image/view6.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div>
<style> div.img{ margin: 5px;/**/ border: 1px solid #ccc; float: left; width: 180px; } div.img:hover{ border: 1px solid #777; } img{ width: 100%;/*由于给外面的div.img设置了宽度， 所有就让里面的图片直接占满，高度就自适应到和这个 宽度匹配的地方即可了*/ height: auto; } div.desc{ padding: 15px; text-align: center; } </style>
二、响应式图片廊
效果图：开始的时候四个一行，缩小陆续变成两个、一个一行
<style> div.img{ border: 1px solid #ccc; } div.img:hover{ border: 1px solid #777; } div.img img{ width: 100%; height: auto; } div.desc{ padding: 15px; text-align: center; } *{ box-sizing: border-box; /*为了页面的美观，宽度自适应了*/ } .responsive{ padding: 0 6px; float: left; width: 24.999999%; /* 这里表示的就是开始的时候4个图片放一行的 */ } @media only screen and (max-700px){ .responsive{ width: 49.99999%; margin: 6px 0; } /* 这里就是当页面是700px的时候一行就是两个图片了 并且要记住代码第一行 and后面一定要空格才行的 */ } @media only screen and (max-500px) { .responsive{ width: 100%; } } .clearfix:after{ content: ""; display: table; clear: both; } /* :after表示的是在选定的标签后面加东西，content表示的就是要加的东西了 display就是把这个标签作为块级元素，然后前面和后面都是由换行符的 clear表示的是把左边或者右边是能由浮动的元素，both表示的就是两边都 没有浮动的元素了 */ </style>
<body> <h2 style="text-align:center">响应式图片相册</h2> <div class="responsive"> <div class="img"> <a href="../image/view1.jpg" target="_blank"> <img src="../image/view1.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="../image/view9.jpg" target="_blank"> <img src="../image/view9.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="../image/view10.jpg" target="_blank"> <img src="../image/view10.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="../image/view5.jpg" target="_blank"> <img src="../image/view5.jpg" alt="图片文本表述"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <h4>重置浏览器大小查看效果</h4> </div> </body>