上效果图 :

上代码 :

<!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. [VMware]ESXI下硬盘的两种直通方式

    文章来自:https://rmbz.net/archives/vmware-esxi-passthrough 最近再搞ESXI,把原来的"黑群晖"改成ESXI:因为群晖里有数据,为 ...

  2. Windows 7更新失败的解决方法

    你好,1.在开始菜单中点击运行,→输入"services.msc"→找到"windows update"右击选择"停止":2.进入C:\wi ...

  3. 解决 git中用vim编写文件时，无法写进文字字母以及光标无法移到最右边的问题

    解决方法:可以切换到英文输入法,然后按'a' 或者 'i'  或者 'o' 或者's'  等.s好像会删掉一个字母.o会使光标移到文末.

  4. Java使用OSS实现上传文件

    阿里云OSS使用 1.准备OSS 访问阿里云官网,注册并登录账户(支付宝方便一些,顺便冲点钱) 在产品分类中,找到阿里云oss 然后创建一个bucket 2.使用OSS(上传文件) 2.1在阿里云网站 ...

  5. hystrix的熔断降级

    hystrix的熔断降级 结合Feign使用 1.A服务通过B服务的唯-标识,从Nacos获取到可调用列表. 2.使用feigh中的Http发起远程请求. 3.超过默认配置的时限,抛出异常,结束该线程 ...

  6. 详解CCE服务：一站式告警配置和云原生日志视图

    本文分享自华为云社区<新一代云原生可观测平台之CCE服务日志和告警篇>,作者:云容器大未来. 告警和日志是运维人员快速定位问题.恢复异常的主要手段.运维人员日常的工作模式往往是先接收告警信 ...

  7. MRS大企业ERP流程实时数据湖加工最佳实践

    本文分享自华为云社区<MRS大企业ERP流程实时数据湖加工最佳实践>,作者:晋红轻 . 本文将以ERP流程实践为例介绍MRS实时数据湖方案的演进 案例实践需求解析: 业务描述 AE表:会计 ...

  8. JVM内存模型，你看这一篇就够了

    摘要:JVM是一种用于计算设备的规范,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的. 本文分享自华为云社区<[云驻共创]JVM内存模型的探知之旅>,作者:多米 ...

  9. vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a

    vue3 报这个错误: vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly ...

  10. python 读取数据调翻译更新表字段

    import time import requests import pymysql import datetime import random from hashlib import md5 imp ...