BootWiki教程网
源代码：
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BootWiki 教程网</title> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="responsive"> <div class="img"> <a href="/try/images/demo/demo1.jpg" target="_blank"> <img alt="图片文本描述" height="200" src="/try/images/demo/demo1.jpg" width="300"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="/try/images/demo/demo2.jpg" target="_blank"> <img alt="图片文本描述" height="200" src="/try/images/demo/demo2.jpg" width="300"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="/try/images/demo/demo3.jpg" target="_blank"> <img alt="图片文本描述" height="200" src="/try/images/demo/demo3.jpg" width="300"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> <div class="responsive"> <div class="img"> <a href="/try/images/demo/demo4.jpg" target="_blank"> <img alt="图片文本描述" height="200" src="/try/images/demo/demo4.jpg" width="300"> </a> <div class="desc">这里添加图片文本描述</div> </div> </div> </body> </html>
运行结果