您的位置：首页 > Web前端 > HTML

HTML图片链接详解

2018-03-11 23:27 281 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片特效，author：hly,time:18,3,11</title>
<style>
div.img {
border: 1px solid #CCC;/*1px边框的宽度*/
}
div.img:hover {/*鼠标移动，边框颜色改变*/
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;/*文字距离边框的宽度，决定边框的宽度*/
text-align: center;
}
* {/*整个页面所有的元素*/
box-sizing: border-box;/*为元素设定的宽度和高度决定了元素的边框盒。*/
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;/*文档中的分区或节(div)的宽度*/
}

@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>
<div class="responsive">
<div class="img"> <a target="_blank" href="105.jpg"><!--在新窗口中打开-->
<img src="50.jpg" alt="Forest" width="600" heiheight="400"><!--它规定在图像无法显示时的替代文本。-->
</a>
<div class="desc">the description of the image</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<h4>clearfix</h4>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航