html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style>7
div.img {8
border: 1px solid #ccc;9
}10
11
div.img:hover {12
border: 1px solid #777;13
}14
15
div.img img {16
width: 100%;17
height: auto;18
}19
20
div.desc {21
padding: 15px;22
text-align: center;23
}24
25
* {26
box-sizing: border-box;27
}28
29
.responsive {30
padding: 0 6px;31
float: left;32
width: 24.99999%;33
}34
35
@media only screen and (max-width: 700px){36
.responsive {37
width: 49.99999%;38
margin: 6px 0;39
}40
}41
42
@media only screen and (max-width: 500px){43
.responsive {44
width: 100%;45
}46
}47
48
.clearfix:after {49
content: "";50
display: table;51
clear: both;52
}53
</style>54
</head>55
<body>56
57
<h2 style="text-align:center">响应式图片相册</h2>58
59
<div class="responsive">60
<div class="img">61
<a target="_blank" href="img_fjords.jpg">62
<img src="//NowJava.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">63
</a>64
<div class="desc">Add a description of the image here</div>65
</div>66
</div>67
68
69
<div class="responsive">70
<div class="img">71
<a target="_blank" href="img_forest.jpg">72
<img src="//NowJava.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">73
</a>74
<div class="desc">Add a description of the image here</div>75
</div>76
</div>77
78
<div class="responsive">79
<div class="img">80
<a target="_blank" href="img_lights.jpg">81
<img src="//NowJava.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">82
</a>83
<div class="desc">Add a description of the image here</div>84
</div>85
</div>86
87
<div class="responsive">88
<div class="img">89
<a target="_blank" href="img_mountains.jpg">90
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java