点击刷新
一，属性介绍
1. 浏览器支持
注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。
2. 定义和用法
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
二， 实战
1. 效果图
2. 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ max-width: 100%; vertical-align: middle; } figure{ background-color: blueviolet; display: block; } figcaption{ padding: 10px; text-align: center; font-weight: 800; font-family: serif; color: aliceblue; } </style> </head> <body> <figure> <figcaption>图片说明</figcaption> <img src="./wallhaven-839kvo.jpg" alt=""> </figure> <figure> <img src="./wallhaven-839kvo.jpg" alt=""> <figcaption>图片说明</figcaption> </figure> </body> </html>
© 著作权归作者所有
举报
发表评论
0/200
