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. 标准化数据-StandardScaler

    StandardScaler----计算训练集的平均值和标准差,以便测试数据集使用相同的变换 官方文档: class sklearn.preprocessing.StandardScaler(copy ...

  2. loj#2353. 「NOI2007」 货币兑换 斜率优化

    题意略 题解:可以列出dp方程\(dp[i]=max(dp[j]*{\frac{a[i]*c[j]+b[i]}{a[j]*c[j]+b[j]}}\),化简可以得到\(\frac{dp[i]}{b[i] ...

  3. URL与URI的含义及区别

    1.1 什么是URI? 简单点说:URI就是通用资源标志符,不理解是吧,我第一次听说也是不理解. 进一步说:网络上的一些资源(文档.图片.音频.视频.程序等)都是有一些通用资源标识(Universal ...

  4. ajax实现给JavaScript中全局变量赋值（转）

    原文地址:ajax实现给JavaScript中全局变量赋值 问题简化: <script type="text/javascript"> var a=1 ; functi ...

  5. POJ - 题解sol[暂停更新]

    初期:一.基本算法: (1)枚举. (poj1753,poj2965) poj1753 话说我用高斯消元过了这题... poj2965 巧了,用高斯消元01矩阵更快(l o l). (2)贪心(poj ...

  6. [CodeForces - 614B] B - Gena's Code

    B - Gena's Code It's the year 4527 and the tanks game that we all know and love still exists. There ...

  7. 用vue构建多页面应用

    最近一直在研究使用vue做出来一些东西,但都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面的Vue应用,以及在这个过程会遇到的问题. 准备工作 在本地 ...

  8. java项目中登陆时记住密码

    1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...

  9. 如何解决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 ...

  10. maven聚合工程使用如何debug

    maven聚合工程在正常情况下,使用debug时会出错,因为没有源码,就不会显示代码和断点行数条. 进行如下操作: 默认情况下source下只有默认的default文件夹,点击remove进行删除(这 ...