第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>
效果图如下: