css , dl , dt , dd 的使用. calc
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的更多相关文章
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- Div+css中ul ol li dl dt dd使用
ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...
- HTML 列表 <ol><ul><li><dl><dt><dd>
<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- dl dt dd标签
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...
- 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认识 ...
- dl,dt,dd标签的使用
dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...
- HTML中的ul, ol,li , dl,dt, dd标签
ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
随机推荐
- 十分钟搞定pandas内容
目录 十分钟搞定pandas 一.创建对象 二.查看数据 三.选择器 十二.导入和保存数据 参考:http://pandas.pydata.org/pandas-docs/stable/whatsne ...
- Spring boot @Autowired注解在非Controller中注入为null
参考链接:https://blog.csdn.net/qq_35056292/article/details/78430777
- Java对MongoDB中的数据查询处理
Java语言标准的数据库时MySQL,但是有些时候也会用到MongoDB,这次Boss交代处理MongoDB,所以讲代码以及思路记录下了 摸索的过程,才发现软件的适用还是很重要的啊!!! 我连接的Mo ...
- IDEA中部署tomcat,运行JSP文件,编译后的JSP文件存放地点总结
首先保证你正常部署了Tomcat,并且正常在浏览器中运行了JSP文件. 那么Tomcat编译后的JSP文件(_jsp.class 和 _jsp.java)的存放地点: (一)一般存放在你安装的Tomc ...
- spring boot(一)入门
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- java利用EasyPoi实现Excel导出功能
easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言( ...
- CRM 价格批导2<上一个太多冗余>
INCLUDE:LCRM_MKTPL_COND_IFF39 *--------------------------------------------------------------------- ...
- 八、持久层框架(MyBatis)
一.基于MyBatis的CRUD 1.首先是配置文件Category.xml修改 一次性修改配置文件Category.xml,提供CRUD对应的sql语句. <?xml version=&quo ...
- 音频 API 一览
iOS 和 OS X 平台都有一系列操作音频的 API,其中涵盖了从低到高的全部层级.随着时间的推移.平台的增长以及改变,不同 API 的数量可以说有着非常巨大的变化.本文对当前可以使用的 API 以 ...
- ASP.NET MVC命名空间时引起错误的解决方法
使用VS2012新建了一个Asp.net mvc5的项目,并把项目的命名空间名称更改了(Src更改为UXXXXX),然后就导致了以下错误 刚开始以后是项目的属性中的命名空间没有更改过来的问题,但我在重 ...