上效果图 :

上代码 :

<!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. 关于eclipse中找不到recyclerview的问题

    在eclipse中直接引入v7包之后,还是找不到recyclerview的问题,我们可以通过 sdk\extras\android\support\v7\recyclerview\libs这个目录找到 ...

  2. 混合专家模型 (MoE) 详解

    随着 Mixtral 8x7B (announcement, model card) 的推出,一种称为混合专家模型 (Mixed Expert Models,简称 MoEs) 的 Transforme ...

  3. MES数据追溯常遇问题及解决方法

    MES数据追溯常遇问题及解决方法: 在实际数字化工厂MES应用过程,由于设计或使用不当,数据追溯过程中也可能会存在诸多问题,常遇问题包括:1. 数据质量问题 可能存在数据录入错误.数据缺失或不完整等情 ...

  4. IOS关闭锁屏状态下左滑相机

    IOS 锁屏状态下,左滑就会打开相机,还不能关闭.这种功能说真的,没有啥用,还很麻烦.看了一圈教程,写的也是没写全.自己再写一个,以后换手机还用得上. 注:此方法会导致微信的扫一扫不可用 1.找到&q ...

  5. Pikachu漏洞靶场 XSS（跨站脚本攻击）

    XSS 关于xss的我也是一知半解,所以只放出payload来. 反射型xss(get) 修改maxlength属性之后提交如下内容: <script>alert(/xss/);</ ...

  6. ensp命令行大全

    命令符从用户视图切换到系统视图 system–view 从系统视图切换到用户视图 quit 连入接口命令 interface IP地址 子网掩码配置命令 ip address 接口IP信息查看命令 d ...

  7. 启动多个redis进程

    启动时指定端口 启动时指定端口可在一台服务器启动多个redis进程 cd /opt/work/redis/bin./redis-server ../conf/redis.conf --port 638 ...

  8. ChatGPT Prompts整理总结

    最近一直在学习ChatGPT Prompt的编写技巧,做了一些验证和整理,分享给大家 Act as a Linux Terminal 英文Prompt I want you to act as a l ...

  9. 使用Terraform部署华为云和kubernetes资源

    本文分享自华为云社区<使用Terraform部署华为云和kubernetes资源>,作者: 可以交个朋友. Terraform概述 Terraform 是由 HashiCorp 创建的开源 ...

  10. Solon 开发进阶，四、启动参数说明

    Solon 开发进阶 一.插件扩展机制 二.体外扩展机制 三.常用配置说明 四.启动参数说明 五.全局异常订阅 启动参数,在应用启动后会被静态化(为了内部更高效的利用).比如,想通过体外扩展加载配置, ...