【概况】

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。但有时候在布局的时候,纯粹的用div感觉嵌套的太深,如果换成table来布局,虽说标签会多点,但结构会更加清晰。
 

【例子】

比如我要实现一个下面的用于博客上的文章列表,如下图:
 

一、用div方法,代码如下:

 <style type ="text/css">
     .item{width :710px ;padding-left :60px ;background :url("Images/default.jpg") no-repeat left top ;}
     .item.intro{width :710px ;}
 </style >
 <div class="item">
     <div class ="intro">
         <p>
             <a href="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</a></ p>
         <p class="f12 color6">
             负载量不大的情况下select、delete和update是响应很迅速的,最多加几个索引就可以搞定,但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题。另外在高的情况下,更新一个...
         </p>
         <p class="f12 color6">
             <a href="#">黑树 </a> / <a href ="#">Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
         </p>
          <p class="f12 color6 fr" >
             1小时前
         </p>
     </div >
 </div>

用这种方法是将图片作为整体div的左上角背景,然后设置padding-left,这样就要右边就要固定宽度,还有最下面的时间块浮动会有问题,如图:

 

二、用dl方法,代码如下:

 <style type="text/css">
     .item dt{ width:60px ;float :left ;}
 </style>
 <dl class="item">
     <dt ><img width="48" height="48" alt="" src="Images/default.jpg" /></dt>
     <dd >
         <p>
             < a href ="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</ a></ p>
         <p class="f12 color6">
             负载量不大的情况下select、delete和update是响应很迅速的,最多加几个索引就可以搞定,但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能问题。另外在高的情况下,更新一个...
         </p>
         <p class="f12 color6">
             < a href ="#">黑树 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
         </p>
     </dd >
 </dl>
用这种方法将dt向左浮动,不过其浮动会影响右边的内容,不过想办法也能将其解决,如图:
 

三、用table方法,代码如下:

 <table border="0" cellspacing="10" cellpadding="0" width="100%" class="mb20">
     <tr >
         <td class="w60" valign="top">
             <a href="#">
                 <img width="48" height="48" alt="" src="Images/default.jpg" />
             </a>
         </td>
         <td>
             <table border="0" cellspacing="10" width="100%">
                 <tr>
                     <td colspan="2">
                         <a href="#">< a href ="#">怎么解决ASP.NET下载时的中文文件名乱码 ?</ a> </a>
                     </td>
                 </tr>
                 <tr>
                     <td class=" f12 mt10 color6 lh180" colspan="2">
                         负载量不大的情况下select、delete和update是响应很迅速的,最多加几个索引就可以搞定,但千万级的注册用户和一个设计不好的多对多关系将带来非常严重的性能题。另外在高的情况下,更新一个...
                     </td>
                 </tr>
                 <tr>
                     <td class=" f12 mt10 color6 h40">
                         < a href ="#">黑树 </ a> / <a href ="#"> Javascript</ a> / 3人回答 / 2人关注 / 18人浏览
                     </td>
                     <td class="f12 color6 tr h40">
                         1小时前
                     </td>
                 </tr>
             </table>
         </td>
     </tr >
 </table>
用这种方法,布局上基本上不用写什么样式,直接用td布局,标签是多点,但结构清晰点,而且右边宽度会自适应,如图:
 

【总结】

上面用三种方式实现了列表效果,div+css的方式很流行,但有时候试着用用传统的方法,可能会让自己的思维更开阔点。上面代码很简单,本人一直做后端,前台写的少,要有前端大神路过的话,还劳烦驻足指点一二。上面三种方式都能实现想要的效果,大家挑自己喜欢和擅长的,不能受我的影响,我可不想误人子弟。
div+css布局是很强大,但像上面这种左右上下结构很清晰的用table的特性貌似更方便我们完成页面,只是善用其利、因地制宜吧。
谢谢阅读和支持,我爱你们。
 

网页排版的时候不要忘了table标签的更多相关文章

  1. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  2. 01 UIPath抓取网页数据并导出Excel(非Table表单)

    上次转载了一篇<UIPath抓取网页数据并导出Excel>的文章,因为那个导出的是table标签中的数据,所以相对比较简单.现实的网页中,有许多不是通过table标签展示的,那又该如何处理 ...

  3. python处理html的table标签

    转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...

  4. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  5. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  6. table标签

    table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...

  7. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  8. PHP自学4——通过函数将数组数据输出到html的Table标签中(使用函数的例子)

    这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...

  9. PHP自学3——在html的<table>标签中显示用户提交表单

    为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...

随机推荐

  1. Linux内核分析作业第三周

    一.实验楼实验 使用实验楼的虚拟机打开shell 1 cd LinuxKernel/ 2 qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd ...

  2. 软件工程课程设计——第一个Spring

    开发会议框架表格: 1.我们团队Reborn针对需求功能进行热烈的讨论会议,从功能的方面分析开发,结合在一起组合为App软件,再另外思考附加的功能性娱乐项目. 2.开发过程中,以表格的形式反思开发过程 ...

  3. Daily Scrum - 12/0809

    Meeting Minutes (08的Scrum报告放在word里,publish没有成功,所以这是08-09的报告,抱歉…): 卡片翻转的效果确认完成: 按钮蓄力的效果确认完成: 按钮上移的效果确 ...

  4. Hbase之IP变更后无法启动问题解决

    # 修改hbase IP配置文件地址:/opt/hbase-1.1.13/conf/hbase-site.xml <property> <name>hbase.zookeepe ...

  5. letsencrypt续期 最简单的续期方法更新证书

    Let's Encrypt申请的证书会有三个月的有效期,如何更方便的续期呢? 关于证书续期: 所谓letsencrypt续期,续期相当于重新申请一次证书,然后在服务器端将过期的证书替换掉即可.由于这个 ...

  6. windows文件共享 防火墙规则设置

    防火墙入站规则.完成以下两项设置即可. 设置一 操作:允许连接协议类型:UDP本地端口:137, 138远程端口:所有端口 设置二 操作:允许连接协议类型:TCP本地端口:139, 445远程端口:所 ...

  7. BZOJ 3174 拯救小矮人(贪心+DP)

    题意 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以碰到陷阱口.对于每一个小矮人,我们知道他从脚到肩 ...

  8. Django_重装系统后无法使用 sqlite 数据库报错:com.intellij.execution.ExecutionException: Exception in thread "main" java.lang.ClassNotFoundException: org.sqlite.JDBC

     重装系统后无法使用 sqlite 数据库报错 报错 : com.intellij.execution.ExecutionException: Exception in thread "ma ...

  9. 【刷题】BZOJ 1124 [POI2008]枪战Maf

    Description 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的人也不同. ...

  10. 【bzoj1044】木棍分割

    Description 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长 ...