上效果图 :

上代码 :

<!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. 【Python】【OpenCV】定位条形码（一）

    关于二维码和条形码的检测和识别,在OpenCV中已经有提供了对应的API,cv2.QRCodeDetector() | cv2.barcode_BarcodeDetector() ,相关的实现极其简单 ...

  2. Date、正则表达式练习

    Date.正则表达式练习 package com.guoba.date; import java.text.SimpleDateFormat; import java.util.Calendar; i ...

  3. Windows Server 2012 R2 远程桌面服务部署指南

    著作权归作者所有:来自51CTO博客作者mabofeng的原创作品,请联系作者获取转载授权,否则将追究法律责任 01-Windows Server 2012 R2 远程桌面服务部署指南文章来源:htt ...

  4. 基于FPGA的电子琴设计（按键和蜂鸣器）---第一版---郝旭帅电子设计团队

    本篇为各位朋友介绍基于FPGA的电子琴设计(按键和蜂鸣器)----第一版. 功能说明: 外部输入七个按键,分别对应音符的"1.2.3.4.5.6.7",唱作do.re.mi.fa. ...

  5. 抖音上超好听的神曲音乐，Python教你一次性下载

    不知道什么时候开始,中国出现了南抖音.北快手的互文格局(东市买骏马,西市买鞍鞯-).刚才提到了,之前比较喜欢刷抖音,对于我这种佛系程序猿,看网上这些整容妹子基本一个样.喜欢抖音主要是两个初衷,学做菜听 ...

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

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

  7. CentOS7安装maven,mvn clean -DskipTests package

    1.JAVA_HOME 首先确保正确安装并配置了JAVA_HOME 我这里安装了jdk1.8 2.下载maven 3.6.3 wget https://mirrors.tuna.tsinghua.ed ...

  8. ​HTML代码混淆技术：原理、应用和实现方法详解

    ​ HTML代码混淆是一种常用的反爬虫技术,它可以有效地防止爬虫对网站数据的抓取.本文将详细介绍HTML代码混淆技术的原理.应用以及实现方法,帮助大家更好地了解和运用这一技术. 一.HTML代码混淆的 ...

  9. Seal梁胜：近水楼台先得月，IT人员应充分利用AI解决问题

    2023年9月2日,由平台工程技术社区与数澈软件Seal联合举办的⌈AIGC时代下的平台工程⌋--2023平台工程技术大会在北京圆满收官.吸引了近300名平台工程爱好者现场参会,超过3000名观众在线 ...

  10. Solon 的常用配置

    一.服务端基本属性 #服务端口(默认为8080) server.port: 8080 #服务的 http 信号端口(默认为 ${server.port}) server.http.port: 8080 ...