dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果:

一: 展示图片:

-------------------------

代码:

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>dl,dt,dd的使用</title>

     <style type="text/css">

          html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,

         fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         .all {

             width: 800px;

             margin: 0px auto;

             border: 1px solid black;

         }

         dl {

             /*border: 1px solid red;*/

             float: left;

             width: 200px;

             height: 260px;

             box-shadow: 0px 0px 3px 3px #ccc;

             margin-left: 20px;

             margin-top: 20px;

             margin-bottom: 20px;

         }

         dt {

             width: 100%;

             height: 200px;

             /*border: 1px solid red;*/

         }

         dt img {

             width: 100%;

             height: 100%;

         }

         dd {

             text-align: center;

             line-height: 60px;

             /*border: 1px solid red;*/

         }

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

     </style>

 </head>

 <body>

     <h1>案例一:显示图片</h1>

     <div class="all floatfix">

         <dl>

             <dt><img src="img/1.png"></dt>

             <dd>图片1</dd>

         </dl>

         <dl>

             <dt><img src="img/2.png"></dt>

             <dd>图片2</dd>

         </dl>

         <dl>

             <dt><img src="img/3.png"></dt>

             <dd>图片3</dd>

         </dl>

     </div>

 </body>

 </html>

注意:

1)初始化的时候设置了:  dl, dd, dt, {margin: 0px;   padding: 0px }  .  这是一位 dd 默认是有 margin-left的.

如果 没有  设置 dd {magin:0px } ,出现的效果是:

--------------

二: 简单的表格:

------

代码:

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>dl,dt,dd的使用</title>

     <style type="text/css">

          html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,

         fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         .all {

             width: 800px;

             margin: 0px auto;

             border: 1px solid black;

         }

         dl {

             width: 300px;

             border: 1px solid red;

         }

         dt {

             /*border: 1px solid green;*/

             float: left;

             width: 40%;

             background-color: green;

             /*margin: 3px 0px;*/

             /*margin-top: 2px;*/

             margin: 2px 0px;

         }

         dd {

             /*border: 1px solid green;*/

             float: right;

             width: calc( 60% - 10px );

             margin: 2px 0px;

             padding-left: 10px;

         }

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

     </style>

 </head>

 <body>

     <h1>案例二: 简单的图表</h1>

     <div class="all">

         <dl class="floatfix">

             <dt>Name: </dt>

             <dd>Squall Li</dd>

             <dt>Age: </dt>

             <dd>23</dd>

             <dt>Gender: </dt>

             <dd>Male</dd>

             <dt>Day of Birth:</dt>

             <dd>26th May 1986</dd>

         </dl>

     </div>

 </body>

 </html>

注意:

1) dt , dd  一个左浮动, 一个 右浮动 ;  同时 如果设置 margin , 两个都要设置 ,且保持一致

2) 第 34行  width: calc( 60% - 10px );   calc () 函数的使用.

css , dl , dt , dd 的使用. calc的更多相关文章

  1. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  2. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  3. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  4. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  5. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  6. 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认识 ...

  7. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

  8. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  9. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

随机推荐

  1. DRF之接口文档以及Xadmin

    1. 自动生成接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 1.1. 安装依赖 REST ...

  2. 删除 github 相应仓库下的文件（不删除仓库）

    1.git  clone url(仓库的ssh) 将仓库克隆 到本地 2.进入到本地仓库文件夹 将想要删除的文件删除 3.右键 git bash here 4.git add . 5.git comm ...

  3. bzoj2555: SubString sam+lct

    题意:懒得写背景了,给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 题解 ...

  4. mysql并行执行--缩短主从同步时延

    https://www.w3cschool.cn/architectroad/architectroad-mysql-parallel-copy.html 三.结尾 从mysql并行复制缩短主从同步时 ...

  5. 【微信公众号开发】【13】批量导出公众号所有用户信息到Excel

    前言: 1,一次拉取调用最多拉取10000个关注者的OpenID,当公众号关注者数量超过10000时,可通过填写next_openid的值,从而多次拉取列表的方式来满足需求 2,获取OpenID列表后 ...

  6. java 静态代理和动态代理

    代理模式 一.概述 代理是一种模式,提供了对目标对象的间接访问方式,即通过代理访问目标对象.如此便于在目标实现的基础上增加额外的功能操作,前拦截,后拦截等,以满足自身的业务需求,同时代理模式便于扩展目 ...

  7. js 异步加载

    document 加载 document.write("<scr" + "ipt src=\"js/jquery.js\"></sc ...

  8. 二、持久层框架（Hibernate）

    一.Hibernate对象的状态 实体类对象在Hibernate中有3中状态:瞬时,持久,脱管. 瞬时:没有和Hibernate发生任何关系,在数据库中也没有对应的记录,一旦JVM结束,对象就消失了 ...

  9. 1.Liunx 文件管理

    文件管理命令 1.基本命令:ls .cd .pwd .man 2.文件操作:touch . cp . rm . mv .ln . mkdir . rmdir 3.文件查看:cat .more .les ...

  10. 如何解决Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 8000401a. 问题

    在系统中需要把数据导出到excel并且压缩,然后报了这个问题: 我在网站上找到了方法: 地址:https://social.msdn.microsoft.com/Forums/vstudio/en-U ...