zoukankan      html  css  js  c++  java
  • css

    一,属性介绍

    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>
  • 相关阅读:
    扫盲如何在ECLIPSE中使用条件断点
    春困
    气虚咳喘案
    知足老师论糖尿病
    辨痰之病位与寒热
    常用中药功效比较(任之堂)
    女子全身窜痛案
    小儿外感案
    紫斑案
    读任之堂中药讲记笔记
  • 原文地址:https://www.cnblogs.com/500m/p/13939714.html
Copyright © 2011-2022 走看看