CSS 图片廊
网络编程
图片廊
T以下是使用CSS创建图片廊:
<html><head><style>div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; }div.img img { display:inline; margin:3px; border:1px solid #ffffff; }div.img a:hover img { border:1px solid #0000ff; }div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; }</style></head><body><div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Add a description of the image here</div></div></body></html>
在线运行
编辑:广州鸿名健康科技有限公司
标签:在线,图片,klematis4_big,inline,display