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. 使用xshell远程连接

    xshell 是一个强大的安全终端模拟软件,它支持SSH1,SSH2以及microsoft windows 平台的TELNET协议.xshell通过互联网到远程主机的安全连接. xshell可以在wi ...

  2. 廖雪峰网站：学习python基础知识（一）

    1. python能做什么? 可以做日常任务,比如自动备份你的MP3:可以做网站,很多著名的网站包括YouTube就是Python写的:可以做网络游戏的后台,很多在线游戏的后台都是Python开发的. ...

  3. java把类似a=1&b=2&c=3的String类型数据转成map集合

    public static Map<String, Object> transStringToMap(String mapString, String separator, String ...

  4. python-flask基本应用模板

    1.模板继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. python写网络爬虫的环境搭建

    网上找了好多资料,都不全,通过资料的整理,包括自己的测试,终于把环境打好了,真是对于一个刚接触爬虫的人来说实属不易,现在分享给大家,若有不够详细之处,希望各位网友能补充. 第一步,下载python, ...

  6. AWS EC2 MySQL迁移到RDS案例

    Amazon Relational Database Service (Amazon RDS) 是一种Web 服务,可让用户更轻松地在云中设置.操作和扩展关系数据库.它可以为行业标准关系数据库提供经济 ...

  7. 详谈Oracle12c新特点容器数据库&amp;可插拔数据库（CDB&amp;PDB）

    一般信息 数据字典 CDB_FILE$ DBA_PDBS PDB$SEED CDB_LOCAL_ADMINAUTH$ DBA_PDB_HISTORY PDB_HISTORY$ CDB_PDB_SAVE ...

  8. daal utils printNumericTable

    #=============================================================================== # Copyright 2014-20 ...

  9. [x] 封装、继承，多态

    那么多态的作用是什么呢,封装可以使得代码模块化,继承可以扩展已存在的代码,他们的目的都是为了代码重用. 而多态的目的则是为了接口重用.也就是说,不论传递过来的究竟是那个类的对象,函数都能够通过同一个接 ...

  10. CAD绘制栏杆5.10

    REC绘制一个矩形,(40,40)回车.通过它的中点移动到扶手的中点用移动工具把它往右边稍微移动.在三维图中EXT命令拉伸它,拉到扶手底面.如图选择三维扶手,右击,加栏杆,选择我们绘制的栏杆,单元宽度 ...