使用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. OSI七层结构

  2. Android应用程序中Activity的生命周期

    Android应用程序中Activity的生命周期 对于Android来说Activity的生命周期是非常的重要,尤其是对于新学者来说,只有充分了解了Activity的生命周期,才能写出优良用户体验的 ...

  3. J2EE (十) 简洁的JSTL、EL

    简介 JSTL(JSP Standard Tag Library ,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 由四个定制标记库(core.format.xml 和 sql)和一对通 ...

  4. Protobuf实现Android Socket通讯开发教程

    本节为您介绍Protobuf实现Android Socket通讯开发教程,因此,我们需要先了理一下protobuf 是什么? Protocol buffers是一种编码方法构造的一种有效而可扩展的格式 ...

  5. VLV INDEX

    Normally, when the Directory Server conducts a search, the server looks through the entire entry for ...

  6. Linux系统调用system_call

    2016-03-25 张超的<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 我的虚拟环境和代码在http ...

  7. 小学生之KTV项目文档(bdqn)

    第一步:创建数据库连接方法和打开方法和关闭方法! 1 public class DBHelper 2 { 3 private string str = "server=.;database= ...

  8. firefox 不能显示 glyphicons 字体

    折腾了很久才发现是firefox 不能跨域下载相应的字体文件,将bootstrap相应的css文件和字体文件copy到调用的项目里,问题才得以解决.

  9. Asp.net - The type or namespace name 'App_Code' does not exist in the namespace 'xxx' (are you missing an assembly reference?)

    我在 项目 下面创建一个 App_Code的文件夹,然后在其下创建自定义的类,但是当我在该项目下别的地方使用时报错: The type or namespace name 'App_Code' doe ...

  10. Jenkins学习之——(2)插件的安装

    本章节将讲解如何安装jenkins的插件. 其实jenkins本身不具有任何集成的功能,而是依靠众多的插件实现功能.就像eclipse一样,期本身只是一个编辑器,而当你安装了其他的第三方插件后,就能实 ...