使用figure添加插图

最新推荐文章于 2023-12-09 12:52:02 发布

输出是最好的学习

最新推荐文章于 2023-12-09 12:52:02 发布

阅读量1.1k

点赞数

分类专栏：前端

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/75025376

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

很多时候，我们需要在页面中插入图片，并且还需要对图片进行一个简单的说明，那么这时候，我们就可以使用figure语义元素。具体代码如下

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.content{
			width: 1000px;
			margin:0 auto;
		}
		.FloatFigure{
			margin-right: 20px;
			float: left;
		}
		.FloatFigure figcaption{
			max-width: 200px;
			margin-bottom: 5px;
		}
	</style>
</head>
<body>
	<div class="content">
		<figure class="FloatFigure">
			<img src="test.png" alt="">
			<figcaption>这是图片</figcaption>
		</figure>
	</div>
</body>
</html>

优惠劵

输出是最好的学习

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用figure添加插图

很多时候，我们需要在页面中插入图片，并且还需要对图片进行一个简单的说明，那么这时候，我们就可以使用figure语义元素。具体代码如下 Document .content{ width: 1000px; margin:0 auto; } .FloatFigure{ margin-right: 20px; float: left; }
复制链接

扫一扫