一，属性介绍

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. SSM整合 tomcat报错: <严重 [RMI TCP Connection(22)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal 一个或多个筛选器启动失败。完整的详细信息将在相应的容器日志文件中找到>

    前提:学了一个暑假 从Javaweb -> mybits ->spring -> spring-mvc 打算跟着网上ssm整合项目做一个项目 在完成最后一步spring对spring ...

  2. 独立于 Github，更方便地管理自己的静态网站？来试试这套自托管 Git 仓库方案！

    原文章来自:独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案! - Sxrhhh 的个人小站 就在前几天,我成功地将我自己的网站由 wordpress 迁移为了静态 ...

  3. Java使用HttpUtil.request方法可以发送请求即【Java访问url得到响应数据】

    Java使用HttpUtil.request方法可以发送请求即[Java访问url得到响应数据] 注:这个工具类可以在网上找,也可以自己手写 ,手写的话需要用到以下依赖: <dependency ...

  4. DTD快速入门

    DTD快速入门

  5. Tpon 1.0 一键查询网站存在过的路径

    Tpon 1.0 寻找网站存在过的路径 该工具能够让你发现意料之外的路径 工具描述 编写该工具旨在寻找网站存在过的网站路径,这个地址可能是机器爬下来的也可能是某些人访问过的,在表面你可能看不到它的入口 ...

  6. 春眠不觉晓，Java数据类型知多少？基础牢不牢看完本文就有数了

    文编|JavaBuild 哈喽,大家好呀!我是JavaBuild,以后可以喊我鸟哥!俺滴座右铭是不在沉默中爆发,就在沉默中灭亡,一起加油学习,珍惜现在来之不易的学习时光吧,等工作之后,你就会发现,想学 ...

  7. HDU 2144 Evolution 后缀树/后缀数组

    HDU 2144 Evolution 后缀树/后缀数组 题意 给我们不到一百个字符串(长度不到一百)以及一个百分比q,然后如果某两个字符串的最长公共子串占比超过了q(在两个串中都超过)则两个串为一个集 ...

  8. CNCF首个云原生多云容器编排项目Karmada正式晋级孵化

    文分享自华为云社区<CNCF首个云原生多云容器编排项目Karmada正式晋级孵化]>,作者:云容器大未来. 近日,云原生计算基金会(CNCF)宣布,CNCF技术监督委员会(TOC)已投票通 ...

  9. 一文带你 GNN 从入门到起飞，做一个饭盆最稳 GNN 饭人！

    摘要:本文介绍了图神经网络在学界和业界的发展情况,并给出了图神经网络的基本概念与表示形式,总结了图神经网络的变体,最后介绍了华为云图神经网络框架. 本文分享自华为云社区<干饭人,干饭魂,搞懂图神 ...

  10. 【“互联网+”大赛华为云赛道】API命题攻略：厘清三步解题思路，用好开发工具

    摘要:结合华为云API开放平台API Exploer实现照片分类系统. API能为我们带来什么? 有了 API,可以创建管理云服务器.云容器.云硬盘,提高工作效率:可以接入图像识别.情感分析.内容审核 ...