使用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. MyBatis的事务处理

    先来假设这样一个问题:如果数据库里面有一个用户表和一个作家表,那么当要添加一条数据到作家表中时,作家表的id必须是用户表中的其中一个id,因为作家一定也要是一个用户.这时就涉及到事务处理. 在上一篇博 ...

  2. js日期和毫秒相互转换

    var date = new Date(); var n = date.valueOf() var date2 = new Date(n); console.info(date.valueOf()); ...

  3. 转载：mybatis和hibernate 解析

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  4. nginx 配置正向 HTTP 代理服务器[转]

    如果不想写到 ngnix.conf 中,那么可以在相同的目录下建立另外一个文件夹存放单独的文件,比如新建一个  proxy 的子目录,然后再在里面新建文件 prox.conf ,然后添加如下内容: s ...

  5. 第一篇博客关于Log4net的配置记录

    说明:本程序演示如何利用log4net记录程序日志信息.log4net是一个功能著名的开源日志记录组件.利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括M ...

  6. c - 冒泡/选择排序.

    #include <stdio.h> #define LEN 10 #define TRUE 1 #define FALSE 0 /* 对 10 个数进行排序 */ //选择排序法(值得注 ...

  7. Linux_x64安装Oracle11g（完整版）

    一.修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改/etc/security/limits.conf文件 输入命令:vi /etc/security/lim ...

  8. OC随笔一：类

    总结:        在oc中,我们要整出一个类来,首先需要一个.h头文件和一个.m实现文件.一般我们创建的类都继承了根类,因为根类帮我们实现了很多实用的方法,而类里面会有变量(属性) .函数(方法) ...

  9. 爆炸！iOS资源大礼包(持续更新...)

    今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...

  10. CSS实现三角形效果

    类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...