核心提示：HTML图片链接实现代码教程!doctype htmlhtmlheadmeta charset=utf-8title图片特效，author：hly,time:18,3,11/titlestylep.i...
HTML图片链接实现代码教程
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片特效，author：hly,time:18,3,11</title>
<style>
p.img {
border: 1px solid #CCC;/*1px边框的宽度*/
}
p.img:hover {/*鼠标移动，边框颜色改变*/
border: 1px solid #777;
}
p.img img {
width: 100%;
height: auto;
}
p.desc {
padding: 15px;/*文字距离边框的宽度，决定边框的宽度*/
text-align: center;
}
* {/*整个页面所有的元素*/
box-sizing: border-box;/*为元素设定的宽度和高度决定了元素的边框盒。*/
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;/*文档中的分区或节(p)的宽度*/
}
@media only screen and (max-width:700px) {/*当页面小于960px的时候执行它下面的CSS*/
.responsive {
width: 50%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {/*择器在被选元素的内容后面插入内容*/
content: "";
display: table;
clear: both;/*图像的左侧和右侧均不允许出现浮动元素*/
}
</style>
</head>
<body>
<h2 style="text-align:center"></h2>
<p class="responsive">
<p class="img"> <a target="_blank" href="105.jpg"><!--在新窗口中打开-->
<img src="50.jpg" alt="Forest" width="600" heiheight="400"><!--它规定在图像无法显示时的替代文本。-->
</a>
<p class="desc">the description of the image</p>
</p>
</p>
<p class="clearfix"></p>
<p style="padding:6px;">
<h4>clearfix</h4>
</p>
</body>
</html>
