编辑您的代码：提交代码

​x
 
1
2
3
<!doctype html>
4
<html>
5
<head>
6
<style>
7
div.img
8
  {
9
  margin:3px;
10
  border:1px solid #bebebe;
11
  height:auto;
12
  width:auto;
13
  float:left;
14
  text-align:center;
15
  }
16
div.img img
17
  {
18
  display:inline;
19
  margin:3px;
20
  border:1px solid #bebebe;
21
  }
22
div.img a:hover img
23
  {
24
  border:1px solid #333333;
25
  }
26
div.desc
27
  {
28
  text-align:center;
29
  font-weight:normal;
30
  width:150px;
31
  font-size:12px;
32
  margin:10px 5px 10px 5px;
33
  }
34
</style>
35
</head>
36
<body>
37
​
38
<div class="img">
39
  <a target="_blank" href="/i/tulip_ballade.jpg">
40
  <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
41
  </a>
42
  <div class="desc">在此处添加对图像的描述</div>
43
</div>
44
​
45
<div class="img">
46
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
47
  <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
48
  </a>
49
  <div class="desc">在此处添加对图像的描述</div>
50
</div>
51
​
52
<div class="img">
53
  <a target="_blank" href="/i/tulip_fringed_family.jpg">
54
  <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
55
  </a>
56
  <div class="desc">在此处添加对图像的描述</div>
57
</div>
58
​
59
<div class="img">
60
  <a target="_blank" href="/i/tulip_peach_blossom.jpg">
61
  <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
62
  </a>
63
  <div class="desc">在此处添加对图像的描述</div>
64
</div>
65
​
66
</body>
67
</html>
68
          

查看结果：

请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。w3c0.com

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。 当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 鲁ICP备15022115号