【筆記】浮動屬性float的應用04——浮動影象縮圖庫
阿新 • • 發佈：2018-12-06
第1步 - 從一些縮圖和標題開始
在本練習中，我們希望將所有縮圖移動到行中，例如表格單元格。我們將要使用的方法允許任意數量的影象彼此相鄰，具體取決於包含框的寬度。
從6個影象和標題開始，每個影象和標題都在自己的div中。這些div都被賦予了一個名為“thumbnail”的類。最好根據類別的含義來命名類，而不是它們的外觀。
你可以更進一步，使用CSS來定義影象的寬度，使用以下規則“.thumbnail img {width：60px; height：60px;}”
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> </body> </html>
效果圖如下：
第2步 - 浮動div
將“float：left”應用於.thumbnail規則。這將強制每個div到包含框的左邊緣或直到它到達另一個div的邊緣。浮動元素時也需要寬度 - 除非它是影象。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .thumbnail { float:left; width:60px; } </style> </head> <body> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> </body> </html>
效果圖如下：
第3步 - 新增邊框
為了更容易看到發生了什麼，使用“border：1px solid＃999;”為div新增邊框。Netscape 4不喜歡這個規則，所以它應該使用“ @import ” 隱藏在瀏覽器中。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .thumbnail { float:left; width:60px; border:1px solid red;/*new codes*/ } </style> </head> <body> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> <div class="thumbnail"> <img src="images/healthy.jpg" alt="" width="60" height="60" /><br /> 標題 </div> </body> </html>
效果圖如下：
第4步 - 新增保證金
可以新增邊距以將div推離彼此。
Netscape 4嚴重誤解了利潤率。要隱藏此瀏覽器的邊距，但允許它們由符合標準的瀏覽器應用，請將邊距規則放在單獨的樣式表中，並使用“ @import ”將樣式錶鏈接到html頁面。
我們在這裡使用簡寫規則：“margin：0 15px 15px 0;”。請記住，速記值按順時針順序應用; 頂部，右側，底部，左側。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail {
float:left;
width:60px;
border:1px solid red;
margin:0 15px 15px 0;/*new codes*/
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
</body>
</html>效果圖如下：
第5步 - 強制換行
如果您使用的是液體佈局（內容區域將由使用者瀏覽器視窗大小的寬度決定），您可能希望根據需要讓縮圖流向新行。但是，如果您使用的是包含設定寬度的框，則可能希望強制換行並在每一行上設定一定數量的縮圖。
有幾種方法可以實現這一目標。在本練習中，我們將使用BR為“clear：both”的BR。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail {
float:left;
width:60px;
border:1px solid red;
margin:0 15px 15px 0;
}
.clearboth {
clear:both;/*new codes*/
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<br class="clearboth"><!--new codes-->
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
</body>
</html>效果圖如下：
第6步 - 新增填充
此時，您可能希望刪除div周圍的邊框。如果要保留邊框，則必須新增一些填充，以使其遠離影象。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail {
float:left;
width:60px;
border:1px solid red;
margin:0 15px 15px 0;
padding:5px;/*node codes*/
}
.clearboth {
clear:both;
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<br class="clearboth">
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
<div class="thumbnail">
<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
標題
</div>
</body>
</html>效果圖如下：
