上效果图 :

上代码 :

<!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. Ef Core花里胡哨系列(10) 动态起来的 DbContext

    Ef Core花里胡哨系列(10) 动态起来的 DbContext 我们知道,DbContext有两种托管方式,一种是AddDbContext和AddDbContextFactory,但是呢他们各有优 ...

  2. OfficeWeb365任意文件读取

    OfficeWeb365任意文件读取 OfficeWeb365 /Pic/Indexs接口处存在任意文件读取漏洞,攻击者可通过独特的加密方式对payload进行加密,读取任意文件,获取服务器敏感信息, ...

  3. 虚拟化M搭建及基本操作

    虚拟化MH搭建 虚拟化概念: 虚拟机安装分为2块:RHEVM .RHEVH RHEVM:负责管理角色 RHEVH:负责运算角色 2016-09-23_0-52-54.png hypervisor: 提 ...

  4. 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 13.使用GameplayTag实现使用钥匙卡打开箱子

    斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章将会展示Gameplay另一个用法,也就是我们最常见的使用特定道具交互特定的机关.例如本文要实现的,获得 ...

  5. 聊一聊如何整合Microsoft.Extensions.DependencyInjection和Castle.Core(完结篇)

    前言 书接上回,上回我们了解了 castle 代理的一些缺点,本文将开始操作整合 Microsoft.Extension.Dependency和Castle,以让默认的容器可以支持拦截器 我们将以进阶 ...

  6. 3、Container容器组件

    Container容器组件 代码 import 'package:flutter/material.dart'; void main() {   runApp(MaterialApp(     hom ...

  7. C# 查找PDF页面指定区域中的文本并替换和高亮

    对PDF文档中的内容进行查找时,可针对文档全篇内容获取查找结果,也可在PDF指定页面中的特定范围内(矩形框区域)进行查找,对获取的查找结果可执行文本高亮或替换等操作,本文将对此作相关介绍(附VB.NE ...

  8. 万万没想到，我在夜市地摊解决了MySQL临时表空间难题~~

    都说"大隐隐于市,高手在深宫".突如其来的"摆地摊"风潮,让原本冷清的街道热闹非凡,也让众人发现了那些神龙见首不见尾的大神们. 这不,小毛在下班的途中就遇到了大 ...

  9. IAP：物联网终端软件升级技术

    摘要:IAP是利用自己的程序代码实现升级程序(新的APP)从外部接口(可以是串口.I2C.SPI.网口等等)写入到flash中,再通过flash读写操作,将新的APP覆盖原有APP程序,在重新从新的A ...

  10. 基于OpenHarmony L2设备，如何用IoTDeviceSDKTiny对接华为云

    摘要:本文主要讲解如何基于L2设备对接华为云IoTDA,以DAYU200开发板,采用IoTDeviceSDKTiny对接华为云IoTDA,当然这里也可以采用其他OpenHarmony的富设备. 本文分 ...