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