效果截图如下:
html代码如下:
<dl>
<dt>领导、老师</dt>
<dd><img src="images/tx1.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzzzz</a></dd>
<dd><img src="images/tx2.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
<dd><img src="images/tx3.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
<dd><img src="images/tx4.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
<dd><img src="images/tx5.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
</dl>
css代码如下:
dl dd{
margin-top:10px;
height:100px;
border:1px solid #F00; /*颜色*/
}
dl dd img{
float:left;
border:1px solid #F00; /*颜色*/
}
dl dd a{
line-height:100px; /*注意这行代码,惹是不写,得不到想要的结果哦*/
vertical-align:middle;
border:1px solid #F00; /*颜色*/
text-align:left;
}