CSS之responsive image gallery

article/2025/10/12 18:09:12

responsive image gallery

这次实例主要是练习如何讲不同的图片设置为一个栏目，并且能够根据屏幕的大小进行自适应的变换。需要注意的是，本次实例中运用到的重要的关键的内容是：float-left；box-sizing; @media screen and (max-width:700px)
本实例的显示效果为:

（1）屏幕大小<=500px

这里写图片描述

（2）屏幕大小500px < width <= 700px

这里写图片描述

（3）屏幕大小>700px

这里写图片描述
index.html:

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="style.css" /><meta charset="utf-8" content="width=device-width,initial-scale=1.0">
</head>
<body><h1>Flower Gallery</h1><p>It is a responsive image gallery, resize the browser to see the different effect please.</p><div class="responsive"><div class="flower"><a href="image/rose.jpg" target="_blank"><img src="image/rose.jpg" alt="rose"></a><p>A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. </p></div></div><div class="responsive"><div class="flower"><a href="image/daisy.jpg" target="_blank"> <img src="image/daisy.jpg" alt="daisy"></a><p>Daisy, fresh, wholesome, and energetic, is one of the flower names that burst back into bloom after a century's hibernation. </p></div></div><div class="responsive"><div class="flower"><a href="image/Phalaenopsis.jpg" target="_blank"><img src="image/Phalaenopsis.jpg" alt="rose flower"></a><p>Phalaenopsis, known as moth orchids, abbreviated Phal in the horticultural trade, is an orchid genus ofapproximately 60 species. </p></div></div><div class="responsive"><div class="flower"><a href="image/jasmine.jpg" target="_blank"><img src="image/jasmine.jpg" alt="jasmine"></a><p>he Jasmine is a very popular flower around the world especially in the tropics because of its unique fragrance. </p></div></div>
</body>
</html>

style.css

/* 
* @Author: Lin
* @Date:   2017-07-15 20:05:05
* @Last Modified by:   Lin
* @Last Modified time: 2017-07-15 21:26:48
*/
/*注：当没有出现预期的效果时，需要检查单词的拼写是否正确，特别是class或者是id的名字在css和html中是否一致在这份练习中，图片用ps调成了统一的大小：300px*200px
*/
div.flower {border:1px solid lightgrey;
}div.flower:hover {border-color:#999999;
}
div.flower img {width:100%;
}
/*注意这一行代码，在之前的练习中没有遇到过*/
* {box-sizing: border-box;
}
/*注意float:left的使用*/
.responsive {padding: 0 6px;float: left;width: 24.9%;height:auto;
}
div.flower p {padding:10px 15px;font-family:Georgia;font-size:18px;
}
/*用于设置responsive的代码*/
@media only screen and (max-width: 700px) {.responsive {width: 49.9%;margin: 6px 0;}
}
@media only screen and (max-width: 500px) {.responsive {width:100%;}
}