使用dl,dt,dd替代传统的table布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>-dl dt dd表格</title>

<style>

dl,dt,dd{

    margin:0;

    background:#fff5fa;

    font-size:14px;

    }

dl{

    margin:0 auto;

    width:50%;

    border:1px solid #f8b3d0;

    border-bottom:none;

    }

dt{

    font-weight:800;

    background:#ff99cc;

    color:#fff;

    }

dt,dd{

    line-height:30px;

    padding:0 0 0 10px;

    border-bottom:1px solid #f8b3d0;

    height:30px;

    overflow:hidden

    }

dd{

    text-indent:3em;

    }

.fff{

    background:#fff

    }

dt span,dd span{

    display:block;

    float:right;

    font-size:14px;

    border-left:1px solid #f8b3d0;

    text-indent:0em;

    width:80px;

    text-align:center;

    }

</style>

</head>

<body>

<dl class=hb>

<dt><span>下载地址</span><span>更新时间</span>热门IT资源下载</dt>

<dd class=fff><span>——</span><span>11.2</span>Delphi发邮件（SendDLL.dll）应用例子</dd>

<dd><span>——</span><span>11.3</span>EasyCrm 客户资源管理系统 v2011 2.0</dd>

<dd class=fff><span>——</span><span>11.4</span>爱考.NET在线考试系统</dd>

<dd><span>——</span><span>11.5</span>蓝色漂亮的管理员登录页模板</dd>

<dd class=fff><span>——</span><span>11.6</span>如此简洁美观的管理登录模板页</dd>

<dd><span>——</span><span>11.13</span>Delphi 学校学生信息查询系统</dd>

<dd class=fff><span>——</span><span>11.30</span>Delphi图片管理，Access源代码版</dd></dl>

</body>

</html>

DL，DT，DD，比传统table更语义，解析更快的table列表方式的更多相关文章

  1. dl,dt,dd标签的使用

    dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...

  2. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  3. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

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

    dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: <!DOCTYPE html> < ...

  5. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  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. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  8. html中的dl,dt,dd标签

    html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...

  9. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  10. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

随机推荐

  1. jQuery 左侧滑动

    $("#slideleft button").click(function(){ var $lefty = $(this).next(); $lefty.animate({ lef ...

  2. apache archiva安装教程

    1. 下载archiva standalone  http://archiva.apache.org/download.cgi 2. 解压,设置ARCHIVA_HOME 环境变量 3.为了防止冲突, ...

  3. 【剑指offer】二叉搜索树的后序遍历序列

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26092725 剑指offer上的第24题,主要考察递归思想,九度OJ上AC. 题目描写叙述 ...

  4. Java调用天气Webservice的小应用

    废话不多说,直接贴代码: CityReq.java package com.weather; import javax.xml.bind.annotation.XmlElement; import j ...

  5. Java基础知识强化67：基本类型包装类之Integer直接赋值的面试题

    1. 面试题: Integer  i = 1: i += 1: 做了哪些事情? (1)其中Integer i =1:做了自动装箱( 使用valueOf()方法,int ---> Integer ...

  6. Mysqldb连接Mysql数据库（转）

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...

  7. iOS分享 - 对象间的通信之delegate、notificationCenter与block

    在项目开发中,常常会涉及到对象之间的通信,而为了降低对象间的耦合,会采用delegate.notificationCenter.block三种方式来进行实现,对于他们的使用,也许大家都能熟练掌握,但是 ...

  8. ClustrMaps——访问者位置

    ClustrMaps——访问者位置: http://www3.clustrmaps.com/zh/counter/maps.php?url=http://www.cnblogs.com/JuneZha ...

  9. C#摇奖程序

    private void Form1_Load(object sender, EventArgs e) { //取消跨线层访问控件的判断 Control.CheckForIllegalCrossThr ...

  10. 验证码 Demo

    //设置响应头 response.setCharacterEncoding("image/jpeg"); int width=160; int height=40; Buffere ...