使用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. (转)实战p12文件转pem文件

    需要实现这个功能的一般都是app开发证书不支持通配符(即com.xxx.xxx.xxx格式),在业务需求上类似消息推送这样的业务. 1.首先生成一个ssl的证书 选择app IDS 后实现下面这个(这 ...

  2. java(17) - 增强for循环、装箱拆箱、可变参数

    一.增强型for循环: 语法格式: 打印: A B C D E 当遍历集合或数组时,如果需要访问集合或数组的下标时,最好使用旧的方法来便利或循环,而不要用增强型for循环,因为它丢失了下标信息. 对于 ...

  3. Linux进程实时监控 - htop

    htop 是一个 Linux 下的交互式的进程浏览器,top的增强版 htop:                        进入:htop        退出:按q键 常用操作:          ...

  4. [React Testing] Intro to Shallow Rendering

    In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...

  5. Android Studio使用教程（一）

    今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...

  6. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  7. SQL Server中的临时表和表变量 Declare @Tablename Table

    在SQL Server的性能调优中,有一个不可比面的问题:那就是如何在一段需要长时间的代码或被频繁调用的代码中处理临时数据集?表变量和临时表是两种选择.记得在给一家国内首屈一指的海运公司作SQL Se ...

  8. eclipse安装ADT插件重启后不显示Android SDK Manager和Android Virtual Device Manager图标的一种解决办法

    通常安装,搭建安卓环境后,不显示Android SDK Manager和Android Virtual Device Manager ize解决方法:Eclipse ->window->c ...

  9. C++中的dynamic_cast和static_cast

    代码: #include <cstdio> #include <iostream> using namespace std; class A{ public: virtual ...

  10. [leetcode][042] Trapping Rain Water (Java)

    我在Github上新建了一个解答Leetcode问题的Project, 大家可以参考, 目前是Java 为主,里面有leetcode上的题目,解答,还有一些基本的单元测试,方便大家起步. 题目在这里: ...