上效果图 :

上代码 :

<!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. 数字孪生结合GIS能够在公共交通领域作出什么贡献？

    数字孪生结合地理信息系统(GIS)在公共交通领域具有潜在的重大贡献,这种结合可以帮助城市更高效地规划.运营和改进公共交通系统.以下是一些关键方面的讨论,以说明数字孪生和GIS在这一领域的作用: 数字孪 ...

  2. 酷表ChatExcel -北大出品免费自动处理表格工具

    酷表ChatExcel是通过文字聊天实现Excel的交互控制的AI辅助工具,期望通过对表输入需求即可得到处理后的数据(想起来很棒),减少额外的操作,辅助相关工作人员(会计,教师等)更简单的工作.Cha ...

  3. CentOS 7 部署 Seafile 服务器（使用 MySQL/MariaDB）

    本文档用来说明通过预编译好的安装包来安装并运行基于 MySQL/MariaDB 的 Seafile 服务器.(MariaDB 是 MySQL 的分支) 提示:如果您是初次部署 Seafile 服务,我 ...

  4. rime中州韵 输入效果一览 100+增强功能效果

    rime是一个定制化程度很高的输入法框架, 我们可以在该框架上搭建适合自己的输入法程序.我们将在专栏 小狼毫 Rime 保姆教程 中完成以下近百种定制化效果的配置与演示.欢迎订阅. 以下为个性化定制的 ...

  5. 标准物模型：设备无缝对接，IOT界的福音

    摘要:信息模型是解决IoT产业发展一系列挑战的关键,在信息模型的基础上可以推进行业标准/架构的统一,进而实现产业链生态的协同. 本文分享自华为云社区<[云驻共创]标准物模型,物联网的福音> ...

  6. 【“互联网+”大赛华为云赛道】GaussDB命题攻略：支持三种开发语言，轻松完成数据库缓冲池

    摘要:七届中国国际"互联网+"大学生创新创业大赛火热报名中,为了帮助参赛者更好了解赛题设计思路和命题方向,华为云产业命题赛道举行了线上直播解读,华为云数据库资深架构师苏斌在直播间详 ...

  7. 云小课 | DSC之数据水印，防止数据被盗用

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

  8. 快来一起玩转LiteOS组件：RHas

    摘要:RHash是一个C语言编写的哈希函数库,用于计算和验证磁力链接和各种消息摘要的控制台实用程序. 本文分享自华为云社区<LiteOS组件尝鲜-玩转RHas>,作者:Lionlace . ...

  9. 信创就用国产的生态，Solon v2.6.4 发布

    Solon 是什么框架? Java 新的"生态级"应用开发框架.从零开始构建,有自己的标准规范与开放生态(历时六年,具备全球第二级别的生态规模). 相对于 Spring,有什么特点 ...

  10. why哥这里有一道Dubbo高频面试题，请查收。

    这是why的第 64 篇原创文章 荒腔走板 大家好,我是 why,欢迎来到我连续周更优质原创文章的第 64 篇.老规矩,先荒腔走板聊聊其他的. 上面这图是我之前拼的一个拼图. 我经常玩拼图,我大概拼了 ...