figcaption标签css,漂浮在行<figure>＆amp; <figcaption>

最新推荐文章于 2022-08-19 14:22:53 发布
最新推荐文章于 2022-08-19 14:22:53 发布
阅读量161 收藏
点赞数
文章标签： figcaption标签css

var fc = document.querySelectorAll("figcaption");

var mh = 0;

// get the maximum height

for (var x = 0; x < fc.length; x++) {

if (fc[x].offsetHeight > mh) { mh = fc[x].offsetHeight; }

}

// set all the figcaptions with the same maximum height

for (var x = 0; x < fc.length; x++) {

fc[x].style.height = mh + "px";

}

figure { display: table; float: left; }

figcaption { display: table-caption; caption-side: bottom ; }

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo ullamco laboris nisi ut aliquip ex

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmofgdgdfgdfgfdgd tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

img_01.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquafgfdg. Ut enim ad minimrfgdfg gf fdg f g fd gfd g veniam, quifdgfds nostrud fdgfdgexercitation ullamco laboris nisi ut aliquip ex
啊湫湫湫丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「HTML和CSS入门指南」figcaption 标签详解
a451319296的博客
06-10 1553
figcaption 标签是一个重要的标签，用于为与 figure 元素相关的媒体内容提供说明性文本。在使用 figcaption 标签时，请注意选择正确的属性和方法、语义化和嵌套，并避免兼容性问题。
html5 figure和figcaption的使用方法
12-13
其中，`<figure>` 和 `<figcaption>` 标签是为了解决图像、图表、代码块等多媒体内容的语义化表示而设计的。这两个标签的结合使用，能够帮助搜索引擎更好地理解网页内容，同时提高代码的可读性，让开发者更容易地...
30秒看懂figure和figcapiton标签
九天翔龙的技术博客
09-29 1844
一、释义 figure ， 图表，例图。 figcaption，表头，图的标题。 caption 就是标题，fig 则是 figure 的简写。 二、用法 <figure></figure> 用在网页中装载图片、数据表格等内容。 <figcapiton></figcapiton> 则是图片、数据表格的标题。 PS：他们都是块级标签。 ...
CSS样式收集：figure、figcaption篇
IT门外汉jackie的博客
02-04 1124
原文地址：https://freefrontend.com/html-figure-figcaption-css/ 比较喜欢简单明了的，是这款右下角标签样式：https://codepen.io/ismanfromes/pen/vrRLvE
css小tips -- figcaption标签
萧墨的博客
07-11 1097
今天看到了figcaption标签： &amp;lt;div class="col-md-4"&amp;gt; &amp;lt;figure class="single bg"&amp;gt; &amp;lt;img class="img-fluid" src="https://res.cloudinary.com/kirillkrasin/image/upload/v1529409840/codepen/c.
figcaption标签css,[HTML]正确使用Figure和Figcaption标签（译）_html/css_WEB-ITnose
weixin_30536391的博客
08-04 983
原文： Quick Tip: The Right Way to Use Figure &amp; Figcaption Elementsfigure和 figcaption元素通常作为两个语义化的标签并一起使用。如果你没看过 这个细则，没有机会在项目中使用他们，或者不知道如何使用他们，那么这里提供一些提示以便你们正确使用。figure标签通常用于图片元素：figure标签是一种独立于上下文的单元。...
HTML5 之 Figure Figcaption 标签
无
08-17 6425
概述   figure 用于定义一个可附加标题的内容元素，figcaption 用于为figure元素添加标题和描述信息。   页面中的插图卡片比较常见，卡片中包含有图片的描述信息、标题或者按钮等。   一般的实现方式可能会用div元素设置background: url()的方式将图片作为背景，其余的描述信息和标题作为div的子元素。   或者是div元素内部添加img元素，其余的描述信息和标题则定位至图片上方。   虽然两者都能实现上面的卡片样式，但是HTML的结构和语义化不是非常明显。   以下HT.
第13章 figure元素与figcaption元素
04-23
在HTML5中，`<figure>`元素和`<figcaption>`元素是两个非常重要的语义化标签，它们主要用于定义和描述图示、图表或其他媒体内容。本章将深入探讨这两个元素的功能、用途以及如何在实际网页设计中有效利用它们。 `...
html5 figcaption和css3制作8种惊艳的图片标题hover效果
12-13
HTML5的`<figcaption>`标签和CSS3是现代网页设计中的关键元素，它们共同为创建交互性和视觉吸引力的网页提供了强大的工具。在这个项目中，利用这些技术制作了8种独特的图片标题hover效果，展示了HTML5与CSS3结合的...
浅谈html5标签css3的常用样式
09-27
6. `<figure>` 和 `<figcaption>`：用于图像、图表、代码块等的容器，`<figcaption>`为容器的标题。 7. `<details>` 和 `<summary>`：创建可折叠的详细内容，`<summary>`为摘要或标题。 CSS3的常用样式包括： 1. `...
H5新标签 <figcaption> 定义图文并茂的html5新标签-figure、figcaption
H5爱好者
03-05 7508
本来想分两篇文章来解释说明figure、figcaption的，但是这俩个标签都是定义图文的，所以我们合起来讲解，大家更能容易接受。 大家在写xhtml、html中常常用到一种图片列表，图片+标题或者图片+标题+简单描述。以前的常规写法： title 而在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签。 w3c赋予的定义：figure标签规定独立的
figure元素和figcaption元素
酷小亚
09-25 910
在HTML5中，figure元素用于定义独立的流内容（图像、图表、照片、代码等）；figcaption元素用于为figure元素组添加标题。 效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>figure元素和figcaption元素</title> </head> <body> <p>被称作 “第四代体
html5标签详解,HTML5中figcaption标签用法详解
weixin_39654352的博客
06-19 228
HTML5中figure和figcaption标签一般都是配套使用的，先了解下两者的基本定义，然后结合实例来说明两者的用法。标签规定独立的流内容(图像、图表、照片、代码等等)。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。它是一种元素的组合，可带有标题(可选)。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figur...
html5新标签 figure 和 figcaption
qq_58455089的博客
08-19 243
html5新标签 figure 和 figcaption
HTML——十四
小伟
09-28 846
一、语义化标签： figure figcaption mark article time 二、旋转 transform:rotate(45deg); 三、css3多行显示省略号 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2...
HTML.网页程序设计
小小Bug编写员
02-23 4350
总述、HTML基本格式、常用标签
HTML5 - 用<figure/>添加插图和图题
u014063717的博客
03-17 4800
1，什么是插图（figure） 插图与图片概念不太一样，HTML5规范建议我们把插图想象成一本书的附图。即插图虽然独立于文本，但文本中会提到它。2，插图使用 （1）使用<figure>标签添加插图，并设置浮动，相关的文本可以在其附近围绕。 （2）<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。（添加图题后，alt文本就显得多余，可以去除）。3，使用样例
HTML5中figure和figcaption标签用法
Paranoidyang的博客
01-14 9132
之前看到一个很有趣的轮子：Hover效果，没有使用 JavaScript 代码，全部都是 HTML + CSS便实现了，自己按照网页上面的效果实现了几个之后，用审查者工具看了下源代码，发现 HTML 的基本构造如下面所示：<figure class="effect-julia"> <img src="img/21.jpg" alt="img21"/> <figcaption> <h2
<figure></figure>标签的含义
最新发布
05-12
`<figure></figure>` 标签用于表示一段独立的内容，通常是一个图像、照片、图表等与文本相关的媒体内容。该标签可以用来为这些媒体内容添加标题、说明和其他相关信息。通常与 `<figcaption></figcaption>` 标签一起使用，以提供媒体内容的标题或说明。例如： ```html <figure> <img src="image.jpg" alt="A beautiful landscape"> <figcaption>A beautiful landscape</figcaption> </figure> ``` 在上面的例子中，`<img>` 元素包含了一个图像，`<figcaption>` 元素提供了该图像的标题。包含在 `<figure>` 元素中表示这些元素是相关的，并且应该一起显示和解释。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值