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. 将maven项目托管到github

    1.下载安装git 并通过 git config --global user.name "",和git config --global user.email "" ...

  2. JavaScript基础一

    1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...

  3. Excel文件的读写

    import xlsxwriter,xlrd import sys,os.path fname = 'zm6.xlsx' if not os.path.isfile(fname): print ('文 ...

  4. 模拟spring的IoC

    1.新建一个web项目,jdk版本为1.8.0_111,使用 Jsp + Servlet + Model 实现MVC模式,并使用BeanFactory工厂 + xml配置文件 + 反射 来解耦合 整个 ...

  5. 【其他】【服务器】【4】删除Windows系统中不想要的服务

    步骤: 1,开始菜单栏查找“服务”,打开后找到想要删除的服务 2,右键单击想要删除的服务,选择“属性”-“常规”-“服务名称”,记下服务名称(AA) 3,开始菜单栏输入“cmd”打开命令行窗口,输入s ...

  6. Ubuntu中php.ini修改运行内存

    首先,我们要知道我们要修改的是什么文件?那就是php.ini文件,一般php有关运行的文件都跟这个文件有关系,路径是 /etc/php5/apache2 .在这里我们就可以用命令进入, cd /etc ...

  7. java调用url

    1 try { String str; URL u = new URL("https://www.baidu.com"); InputStream is = u.openStrea ...

  8. 12. Integer to Roman C++

    直接将各个数位上每个数所代表的罗马数字表示成字符串数组,然后提取出num的各位数,将对应的string相加 class Solution { public: string intToRoman(int ...

  9. 【Query】使用java对mysql数据库进行查询操作

    操作步骤: 1.加载数据库驱动(先在工程里加载数据库对应的驱动包) 2.获取连接 3.根据连接建立一个可执行sql的对象 4.执行sql语句 5.关闭连接 代码: package database; ...

  10. java中super关键字的用法

    class Sum { int n; float f() { float sum=0; for(int i=1;i<=n;i++) sum=sum+i; System.out.println(& ...