一，属性介绍

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>

css - 使用 figure 和 figcaption 快速实现 图片加文字的垂直方向的布局 ( 不支持ie9以下版本 )的更多相关文章

  1. PHP给图片加文字水印

    <?php /*给图片加文字水印的方法*/ $dst_path = 'http://f4.topitme.com/4/15/11/1166351597fe111154l.jpg'; $dst = ...

  2. Java图片加文字水印

    Java图片加文字水印 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.I ...

  3. C#给图片加文字水印

    public class TxtWaterMark { public enum WaterPositionMode { LeftTop,//左上 LeftBottom,//左下 RightTop,// ...

  4. ASP.NET(C#)图片加文字、图片水印，神啊，看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  5. php给图片加文字

    在图片上加文字是论坛,博客,新闻网站上最喜欢用的功能,防止盗图.这里看看代码是如何实现的. 首先还是upload_image.php这个文件,注意这里的caption文本框中输入的内容最终会写到图片上 ...

  6. C#给图片加文字和图片的水印

    /// <summary> /// WaterMark 的摘要说明 /// </summary> /// 图片加水印 /// <param name="strC ...

  7. Android给图片加文字和图片水印

    我们在做项目的时候有时候需要给图片添加水印,水寒今天就遇到了这样的问题,所以搞了一个工具类,贴出来大家直接调用就行. /** * 图片工具类 * @author 水寒 * 欢迎访问水寒的个人博客:ht ...

  8. PHP图片加文字水印和图片水印方法（鉴于李老师博客因没加水印被盗，特搜集的办法。希望能有用！）

    $dst_path = 'dst.jpg'; //创建图片的实例 $dst = imagecreatefromstring(file_get_contents($dst_path)); //打上文字 ...

  9. PHP给图片加文字（水印）

    准备工作: 代码: <?php header("Content-type: image/jpeg"); //浏览器输出,如不需要可去掉此行 $im = @imagecreat ...

  10. PHP图片加文字水印和图片水印方法

    文字水印 $dst_path = 'dst.jpg'; //创建图片的实例$dst = imagecreatefromstring(file_get_contents($dst_path)); //打 ...

随机推荐

  1. 为什么许多数字孪生产品开始了GIS融合的尝试？

    随着数字孪生技术的发展,越来越多的产品意识到要实现数字孪生的最大价值,需要考虑多个维度的数据,包括空间信息.地理位置.环境条件等.因此,许多数字孪生产品开始了与GIS系统的融合尝试,以进一步提升其功能 ...

  2. 【C#】【System.Linq】一些便捷的数据处理方法（Range、Select）

    因为用习惯了Python中一些便捷的方法,随即查询C#中有没有类似的. 一.Range()方法 在Python中,range(Start,End,Step)可以直接生成一个可迭代对象,便用于需要循环多 ...

  3. 【笔记】springSecurity-OAuth2.0-授权模式演示

    SpringSecurityOauth2架构 介绍 流程: 用户访问,此时没有Token.Oauth2RestTemplate会报错,这个报错信息会被Oauth2ClientContextFilter ...

  4. Pikachu漏洞靶场 Burte Force（暴力破解）

    Burte Force(暴力破解) 文章目录 Burte Force(暴力破解) 概述 1.基于表单的暴力破解 2.验证码绕过(on server) 3.验证码绕过(on client) 4.toke ...

  5. 2023年资深C#开发者的思考

    2023年转眼间就这样过掉了,作为一名资深C#的开发员人员,年龄也大了1岁,从最早接触C#开始,算下来已经超过15年以上了,随着工作经验的不断增加,物价不断的飞涨以及家庭支出的不断上涨,工作1份工资已 ...

  6. .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习

    针对 .NET MAUI (微软 .Net 6 跨多平台应用 UI)框架的研究学习,使用VS2022  C# 和 XAML 创建本机移动和桌面应用,开发一套代码可以发布在 Android . iOS ...

  7. MyBatis入门操作

    MyBatis入门操作,其实是我只想验证一下instanceof是否能在xml中使用 根据官网,下面我创建一个普通Maven项目,引入依赖: <dependency> <groupI ...

  8. vue缓存数据

    1,本地缓存(一直存在) localStorage.setItem('key', 'value'); const data = localStorage.getItem('key'); 2,会话缓存( ...

  9. 关于three.js中的矩阵更新

    目录 1. 概述 2. 详解 1. 概述 使用如下代码绘制一个面: 'use strict'; function init() { //console.log("Using Three.js ...

  10. 最新系统MacOs13 Ventura(M1/M2芯片) + Parallels Desktop 18(PD18史上最强虚拟机)永久使用攻略

    众神殿内,高朋满座,胜友如云,Vmware.VirtualBox.Utm等虚拟机大神群英荟萃,只见位于C位王座上的Parallels怅惘抬头,缓缓逡巡,睥睨群小,目光到处,无人敢抬头对视. 是的,如果 ...