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 of
approximately 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%;
}
}
素材：
rose.jpg
daisy.jpg
Phalaenopsis.jpg
jasmine.jpg