今天做一个简单的图片库！
其实这个在w3school教程里介绍得很好了，不过看到什么，自己动手做一次，记得也深刻不是。
我们分几步来走：
第一步：先写一个坯子。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>图片库</title>
</head>
<body>
<div class="box">
<div class="img">
<a target="_blank" href="image/tupian/1.jpg">
<img src="data:image/tupian/1.jpg" alt="图片1" width="160" height="160">
</a>
<div class="desc">图片1的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/2.jpg">
<img src="data:image/tupian/2.jpg" alt="图片2" width="160" height="160">
</a>
<div class="desc">图片2的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/3.jpg">
<img src="data:image/tupian/3.jpg" alt="图片3" width="160" height="160">
</a>
<div class="desc">图片3的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/4.jpg">
<img src="data:image/tupian/4.jpg" alt="图片4" width="160" height="160">
</a>
<div class="desc">图片4的描述</div>
</div>
</div>
</body>
</html>
a标签里的 target="_blank" 表示点击后在新窗口打开链接。
img标签里的 alt="xxxx" 表示鼠标移到图片上时图片的描述。
效果：
给box加上边框是为了更清楚的看好布局。
第二步：我们给里面的4个图片和描述块设置宽高，并且向左浮动。
<style type="text/css">
.box {
border: 1px solid #cccccc;
}
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
}
</style>
效果：
图片上面的那条线是由于图片浮动后，图片在文档流中原有的空间会被关闭，所以默认高度就为0。如果对box高度有要求，只有设置box的高度。
第三步：对图片文字的微调
<style type="text/css">
.box {
border: 1px solid #CCCCCC;
}
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
}
</style>
效果：
第四步：我们可以给图片链接加上鼠标悬停效果，以及给加上阴影，这样看起来就像悬浮着一样。当然，把box的边框去掉把。
<style type="text/css">
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
box-shadow: 5px 5px 5px #888888;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.img a:hover img {
border: 1px solid #333333;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
}
</style>
效果：
看起来顺眼很多。
附上完整代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>图片库</title> <style type="text/css">
div.img {
margin: 3px;
border: 1px solid #cccccc;
text-align: center;
float:left;
box-shadow: 5px 5px 5px #888888;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #cccccc;
}
div.img a:hover img {
border: 1px solid #333333;
}
div.desc{
text-align:center;
font-weight:normal;
width:150px;
font-size:12px;
margin:10px 5px 10px 5px;
} </style>
</head>
<body>
<div class="box">
<div class="img">
<a target="_blank" href="image/tupian/1.jpg">
<img src="data:image/tupian/1.jpg" alt="图片1" width="160" height="160">
</a>
<div class="desc">图片1的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/2.jpg">
<img src="data:image/tupian/2.jpg" alt="图片2" width="160" height="160">
</a>
<div class="desc">图片2的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/3.jpg">
<img src="data:image/tupian/3.jpg" alt="图片3" width="160" height="160">
</a>
<div class="desc">图片3的描述</div>
</div>
<div class="img">
<a target="_blank" href="image/tupian/4.jpg">
<img src="data:image/tupian/4.jpg" alt="图片4" width="160" height="160">
</a>
<div class="desc">图片4的描述</div>
</div>
</div>
</body>
</html>