Html Figure标签
Figure标签简介
浏览器支持
Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。12
如何使用
使用示例3
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
效果图
csdn markdown挺好用的,可以直接粘贴图片啦
我就是一名程序员额
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>figure标签</title>
<style type="text/css">
body {
background-color : #d2b48c;
margin-left : 20%;
margin-right : 20%;
margin-top : 3%;
margin-bottom : 3%;
padding : 10px 10px 10px 10px;
font-family : cursive;
}
.thumbnail {
position: relative;
float: left;
max-width: 200px;
height: auto;
clear: both;
margin: 1px 20px 0 0;
overflow: hidden;
transition-duration: .5s;
}
.thumbnail a img {
float: left;
width: auto;
height: auto;
max-width: 100%;
}
.thumbnail .cat {
background: #c40000;
position: absolute;
top: 0;
left: 0;
filter: alpha(opacity=70);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: 0 0 rgba(216, 0, 0, 0.7);
}
.thumbnail .cat a {
color: #fff;
line-height: 28px;
padding: 0 10px;
}
</style>
</head>
<body>
<h1>图片上显示文字</h1>
<figure class="thumbnail">
<a href="#">
<img width="600" height="371" src="../static/images/timg.jpg" alt="程序员">
</a>
<span class="cat">
<a href="#">程序员</a>
</span>
</figure>
</body>
</html>
Internet Explorer 8 以及更早的版本不支持
标签。 ↩︎