标签：ima set a20 padding lang add enter clear 图片文字
认识CSS的 盒子模型。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <link rel="stylesheet" type="text/css" href="../static/css/102.css"> </head> <body> <div> <div class="img"> <a href="https://baike.baidu.com/"> <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=956e462272f0f736ccb1164137659f29/91ef76c6a7efce1ba31cb897a551f3deb48f65b3.jpg"> </a> <div><p><a target="_blank" href="/item/%E5%AD%99%E4%BF%AA/335060">孙俪</a>饰演 周莹</p></div> </div> <div class="img"> <a href="https://baike.baidu.com/"> <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=74f6de3d45c2d562e6478aadda21bcdf/29381f30e924b89964cf096564061d950b7bf6f8.jpg"> </a> <div><p><a target="_blank" href="/item/%E9%99%88%E6%99%93/1178647">陈晓</a>饰演 沈星移</p></div> </div> <div class="img"> <a href="https://baike.baidu.com/"> <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=a3068c7a753e6709aa4f1fbf06f7b30d/6159252dd42a2834301b465651b5c9ea15cebf29.jpg"> </a> <div><p><a target="_blank" href="/item/%E4%BD%95%E6%B6%A6%E4%B8%9C/821021">何润东</a>饰演 吴聘</p></div> </div> <div class="img"> <a href="https://baike.baidu.com/"> <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=102c5eb8a76eddc432a8eebb04eb9acd/902397dda144ad34475af7dadaa20cf430ad8581.jpg"> </a> <div><p><a target="_blank" href="/item/%E4%BB%BB%E9%87%8D/9484322">任重</a>饰演 赵白石</p></div> </div> </div> <div CLASS="clearfloat"> <div class="pic"> <a href="https://baike.baidu.com/"> <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C643%2C913%3Bh%3D195%3Bq%3D95/sign=73e0b6b3be8f8c54f79c9f6f071901c5/10dfa9ec8a136327be61b26e9b8fa0ec09fac7db.jpg"> </a> <div><p><a target="_blank" href="/item/%E4%BF%9E%E7%81%8F%E6%98%8E/4314503">俞灏明</a>饰演 杜明礼</p></div> </div> <div class="pic"> <a href="https://baike.baidu.com/"> <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C653%2C927%3Bh%3D195%3Bq%3D95/sign=5437ccefb3014a9095711cfd94471522/2cf5e0fe9925bc31164072c554df8db1cb137049.jpg"> </a> <div><p><a target="_blank" href="/item/%E8%83%A1%E6%9D%8F%E5%84%BF/2572809">胡杏儿</a>饰演 胡咏梅</p></div> </div> <div class="pic"> <a href="https://baike.baidu.com/"> <img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D44%2C98%2C588%2C835%3Bh%3D195%3Bq%3D95/sign=f1a51ce415178a82da7325e0cb3747a1/d8f9d72a6059252da7a9fb2c3f9b033b5bb5b958.jpg"> </a> <div><p><a target="_blank" href="/item/%E5%BC%A0%E6%99%A8%E5%85%89/7990300">张晨光</a>饰演 吴蔚文</p></div> </div> <div class="pic"> <a href="https://baike.baidu.com/"> <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C1002%2C1423%3Bh%3D195%3Bq%3D95/sign=b0e74f4844c2d562e6478aadda21bcdf/9f510fb30f2442a7d0ec1c8dda43ad4bd1130233.jpg"> </a> <div><p><a target="_blank" href="/item/%E8%B0%A2%E5%90%9B%E8%B1%AA/373197">谢君豪</a>饰演 沈四海</p></div> </div> </div> </body> </html>
img{
width: 250px;
}
div.img{
border:1px solid #cccccc;
width:200px;
float:left;
margin:5px;
}
div.img img{
width:100%;
height:auto;
}
div.desc{
text-align:center;
padding:5px;
}
div.img:hover{
border:1px solid #777777;
}
.clearfloat{
clear:both;
}
pic{
width: 250px;
}
.pic{
border:1px solid #cccccc;
width:200px;
float:left;
margin:5px;
}
.pic img{
width:100%;
height:auto;
}
.desc{
text-align:center;
padding:5px;
}
.pic:hover{
border:1px solid #777777;
}
标签：ima set a20 padding lang add enter clear 图片文字
原文地址：http://www.cnblogs.com/suxihong/p/7700879.html
