上效果图 :

上代码 :

<!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. CTFHub XSS 过滤关键词 WriteUp

    前文链接:DOM反射xss 这次直接浏览器输入payload,发现 script 被过滤掉了 </textarea>'"><script src=http://xss ...

  2. dfs之迭代加深

    为什么要用迭代加深 \(dfs\) 每次会选择搜索树的一个分支,不断深入,直到达到递归边界条件:但这种搜索策略带有一定的缺陷性: 如果搜索树的某一个分支中的节点个数特别多,但是答案并不在这棵子树里面, ...

  3. uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化

    目录 Recorder-UniCore插件特性 集成到项目中 调用录音 上传录音 ASR语音识别 在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能,uniapp自带的re ...

  4. 面试官：说一说你的第一个Java程序是怎么跑起来的

    面试官:"说一说你第一个Java程序是怎么跑起来的?" 我:"啊,您是说Hello World吗?" 面试官:"嗯,没错,几十年过去了,还是hello ...

  5. Spring表达式语言（SPEL）学习（01）

    算术运算 @Test public void test01() { // 定义解析器 ExpressionParser parser = new SpelExpressionParser(); // ...

  6. react路由权限v6

    方法 1.模拟vue的路由拦截(未尝试) 2.进入页面拦截(模拟后台管理系统) route v6常用属性 页面梳理 路由表 公共路由 权限路由 layout(+权限判定) 登录 页面布局 路由表 点击 ...

  7. Go语言微服务开发框架：Go chassis

    摘要:分布式系统中每个进程的动态配置管理及运行时热加载就成为了一个亟待解决的问题.go chassis汲取了netflix的archaius框架经验,并做出来自己的创新特性. 引言 https://g ...

  8. makefile：带你了解一种常用于GNU gcc编译的工具语言

    摘要:该文章主要介绍makefile,一种常用语GNU gcc编译的工具语言,同时LiteOS也是利用该文件对工程项目进行make构建生成执行文件的. LiteOS源码中使用makefile进行文件的 ...

  9. 云原生数据库风起云涌，华为云GaussDB破浪前行

    摘要:云原生数据库,实现多云协同.混合云解决方案.边云协同等能力的数据库. Gartner预测,2021年云数据库在整个数据库市场中的占比将首次达到50%:2023年75%的数据库将基于云的技术来构建 ...

  10. 设备如何使用go sdk轻松连接华为云IoT平台？

    摘要:本文介绍使用huaweicloud-iot-device-sdk-go 连接华为云IoT平台,实现简单的华为云文档介绍的四个功能:设备连接鉴权.设备命令.设备消息和设备属性. 本文分享自华为云社 ...