上效果图 :

上代码 :

<!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>

      body,

      dl {

        margin: 0;

      }

      img {

        max-width: 100%;

      }

      dl {

        float: left;

        width: 33.3333%;

        background-color: blueviolet;

        color: #fff;

        padding-bottom: 5px;

      }

      dd {

        text-align: center;

        margin: 10px auto;

      }

    </style>

  </head>

  <body>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

    <dl>

      <dt>

        <img src="./wlx2.jpg" alt="" />

      </dt>

      <dd>李信</dd>

    </dl>

  </body>

</html>

css - 使用 " dl、dt、dd " 描述列表的形式 , 实现 【图片加下方文字】 的快速布局的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  3. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  4. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  5. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  6. css , dl , dt , dd 的使用. calc

    dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: <!DOCTYPE html> < ...

  7. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  8. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  9. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  10. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

随机推荐

  1. ElasticSearch之cat datafeeds API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/ml/datafeeds?v=true&pretty" --cacert ...

  2. CentOS7 安装MySQL 8.0.28+

    MySQL的三大版本 a)MySQL Enterprise Edition:企业版本(付费)b)MySQL Cluster CGE:高级集群版(收费)c)MySQL Community Server: ...

  3. openstack云基础架构

    openstack搭建及基本配置 节点servera: 配置好yum后 yum -y update 更新yum仓库 安装openstack yum -y install openstack-packs ...

  4. Next.js 开发指南 路由篇 | 动态路由、路由组、平行路由和拦截路由

    前言 实际项目开发的时候,有的路由场景会比较复杂,比如数据库里的文章有很多,我们不可能一一去定义路由,此时该怎么办?组织代码的时候,有的路由是用于移动端,有的路由是用于 PC 端,该如何组织?如何有条 ...

  5. flutter中InheritedWidget共享数据

    InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制.它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget.子Wi ...

  6. three.js中的矩阵计算

    目录 1. 概述 2. 详论 2.1. 行主序与列主序列 2.2. 矩阵乘法 3. 参考 1. 概述 three.js中自带了矩阵运算库,不过在使用的过程中总是容易混淆.不知道是行主序还是列主序,前乘 ...

  7. Java 在Excel中添加筛选器并执行筛选

    以下内容介绍通过Java程序在Excel添加筛选器并执行筛选.程序需要使用Excel工具类库Free Spire.XLS for Java,本文中使用的是免费版,可在官网下载jar包,解压导入jar文 ...

  8. 云图说｜图解开天企业工作台MSSE

    摘要:开天企业工作台是面向企业用户的一站式数字工作台. 本文分享自华为云社区<[开天aPaaS]图解开天企业工作台MSSE>,作者:开天aPaaS小助手. 开天企业工作台(MacroVer ...

  9. 云小课｜ModelArts Pro 视觉套件：零代码构建视觉AI应用

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:ModelArts ...

  10. 火山引擎 DataTester：“在字节，A/B 实验是一种信仰”

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 进入数字经济时代,要用数据驱动业务增长已经成为各个行业的共识,但很多企业还没能真正掌握这项能力.如何最大限度转化数据价值, ...