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 默认在当前中打开链接地 ...

随机推荐

php单例模式的使用场景,使用方法
一个类只有一个对象实例 1.含义作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 2 ...
使用 com.alibaba.fastjson把json型数据解析成一个javabean
public class CardQueryResponseBO { /** * 返回码 */ @JSONField(name = "code") private String c ...
Oracle PL/SQL语言函数、匿名语句及循环
一.自定义函数格式: create or replace function 函数名(参数名参数类型...) return 返回值类型 as xx vachar2(20) ...
python-day79--知识回顾
内容回顾: 1. 可迭代对象.迭代器.生成器是什么?什么区别? 可迭代对象,含有__iter__,返回一个迭代器迭代器,含有__iter__,__next__方法生成器,yield,__next_ ...
leetcode-algorithms-11 Container With Most Water
leetcode-algorithms-11 Container With Most Water Given n non-negative integers a1, a2, ..., an , whe ...
SQL 查询语句
4.2 单表查询 4.2.1 列名(表名)的别名(as 可以不加) 给列名取别名既可以加 as 也可以不加. (2008 - Sage.lower(Sdept)等可计算但无列名,需要指定列名) 原列名 ...
python中列表生成式
1.简介列表生成式即List Comprehensions,是Python中用于创建list的生成式. 2.示例 [表达式循环体条件语句] #!/usr/bin/env python # - ...
powerdesidgner1
'******************************************************************************'* File: comment2name ...
C#代码中如何比较两个日期的大小？
C#中比较两个日期大小的方法 /// <summary> /// 比较两个日期大小 /// </summary> /// <param name="dateSt ...
Java自动装箱中的缓存原理
今天看到一道'经典'面试题: Integer a = 100; Integer b = 100; System.out.println(a==b); Integer a2 = 200; Integer ...

css , dl , dt , dd 的使用. calc

一: 展示图片:

二: 简单的表格:

css , dl , dt , dd 的使用. calc的更多相关文章

随机推荐

热门专题