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. 十分钟搞定pandas内容

    目录 十分钟搞定pandas 一.创建对象 二.查看数据 三.选择器 十二.导入和保存数据 参考:http://pandas.pydata.org/pandas-docs/stable/whatsne ...

  2. Spring boot @Autowired注解在非Controller中注入为null

    参考链接:https://blog.csdn.net/qq_35056292/article/details/78430777

  3. Java对MongoDB中的数据查询处理

    Java语言标准的数据库时MySQL,但是有些时候也会用到MongoDB,这次Boss交代处理MongoDB,所以讲代码以及思路记录下了 摸索的过程,才发现软件的适用还是很重要的啊!!! 我连接的Mo ...

  4. IDEA中部署tomcat,运行JSP文件,编译后的JSP文件存放地点总结

    首先保证你正常部署了Tomcat,并且正常在浏览器中运行了JSP文件. 那么Tomcat编译后的JSP文件(_jsp.class 和 _jsp.java)的存放地点: (一)一般存放在你安装的Tomc ...

  5. spring boot(一)入门

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  6. java利用EasyPoi实现Excel导出功能

    easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言( ...

  7. CRM 价格批导2<上一个太多冗余>

    INCLUDE:LCRM_MKTPL_COND_IFF39 *--------------------------------------------------------------------- ...

  8. 八、持久层框架(MyBatis)

    一.基于MyBatis的CRUD 1.首先是配置文件Category.xml修改 一次性修改配置文件Category.xml,提供CRUD对应的sql语句. <?xml version=&quo ...

  9. 音频 API 一览

    iOS 和 OS X 平台都有一系列操作音频的 API,其中涵盖了从低到高的全部层级.随着时间的推移.平台的增长以及改变,不同 API 的数量可以说有着非常巨大的变化.本文对当前可以使用的 API 以 ...

  10. ASP.NET MVC命名空间时引起错误的解决方法

    使用VS2012新建了一个Asp.net mvc5的项目,并把项目的命名空间名称更改了(Src更改为UXXXXX),然后就导致了以下错误 刚开始以后是项目的属性中的命名空间没有更改过来的问题,但我在重 ...