使用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. DedeCMS官方手册

    DedeCMSV5.3使用手册 DedeCMSV57数据库结构文档 Dedecms 文件目录结构

  2. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  3. 基于bootstrap的datatable控件

    https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.htmlhttps://github ...

  4. 用GDB调试多进程程序

    在子进程中sleep.然后attach上去. gdb --pid=123456 ps出子进程的id,gdb attach 进程号. http://www.ibm.com/developerworks/ ...

  5. 酷Q机器人，QQ机器人使用教程

    软件介绍: 酷Q,软件酷Q机器人是一款基于webqq开发的一款自动接收.处理qq消息的软件. 改程序使用易语言编写,精简大量不必要代码,减小了软件体积,优化程序速度,使得酷Q更加轻巧好用. 在消息处理 ...

  6. 好的android编码习惯

    上一期分享了android内存优化的一些总结,这一期说说我认为的好的编码习惯,然后下一期会做安卓数据库优化的一些总结,逐渐的会将一些性能优化点总结分享出来,肯定是不够全面的希望不足的地方欢迎指出. 良 ...

  7. chmod

    0表示没有权限,1表示可执行权限,2表示可写权限,4表示可读权限数字与字符对应关系如下:r=4,w=2,x=1若要rwx属性则4+2+1=7若要rw-属性则4+2=6:若要r-x属性则4+1=5命令: ...

  8. debug 心得

    前天做了一个题,就是个简单的状压记忆化搜索,但是debuge了俩小时,给我整的快吐血了,各种不可思议的错误,我都要怀疑是不是电脑有毛病了,后来发现数组开小了,看来以后遇到不可思议的错误就要检查数组开没 ...

  9. pendingIntent初步_什么是pendingIntent

    pendingIntent字面意义:等待的,未决定的Intent. 要得到一个pendingIntent对象,使用方法类的静态方法 通过getActivity(Context context, int ...

  10. [Mugeda HTML5技术教程之10]发布内容

    动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...