`
zljpp
  • 浏览: 259426 次
社区版块
存档分类
最新评论

网页布局之Div vs Table （2）

 
阅读更多

大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。

div实现表格效果需要其他标签辅助，这个就是我们的 ulli标签。

假如要实现这么一个表格效果。


那么使用table布局的代码是这样：


同样的使用div实现这样的效果也特别简单，看看div的代码



这里几点比较注意的是，ul 和li 可以实现表格的布局，这里每个ul相当于table里面的tr实现一行，每个li相当于table的td，实现一个单元格。

其中需要用到css控制它的显示样式，其中list-style-type:none; 这句话消除li前面的项目符号，display:inline; 这句话让li标签横向显示。这样就能实现表格的效果。

通过这种方式，div就能实现表格效果。这样一个小小的div块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的div+li布局。看到很多主流的网站，比如腾讯，网易的网站都大量的使用了这种布局。


这里面还有几个小技巧：

1：使用div+h标签为网站添加标题栏目，div中嵌套h标签组织网站结构，这样更有助于搜索引擎发现你地网站，因为搜索引擎是通过h标签组织网站的搜索结构的。

2：li中一般会出现p标签，a标签和span标签三种，其中a标签是为了添加链接，p+span是为了显示文字的。

3：对于网站的logo，使用h标签加上css中设置图片会更加合理，这样增加了搜索引擎发现率。



分享到：
| 网页布局之Div vs Table （1）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    table布局网页转换为div+CSS布局的转换软件

    在网页设计领域，传统的`table`布局曾是构建网页结构的主要方式，但随着Web标准的发展，`div`结合`CSS`布局（层叠样式表）逐渐成为主流。`table`布局虽然简单易用，但在复杂性和可维护性上存在诸多问题，如不易控制...

    Table转div+css工具

    在网页设计领域，布局方式的发展经历了从表格（Table）到层（Div）+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件，它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...

    table转div工具

    在提供的压缩包文件"table2css-2.9.0-trial.exe"中，我们可以看到这是一个试用版本的table转div工具，版本号为2.9.0。安装并运行这个工具，用户可以直接导入包含table的HTML文件，然后导出转换后的HTML和CSS文件。在...

    Table2CSS3.0.0完美汉化破解版|普通表格布局网页自动转DIV+CSS

    Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频：(演示视频为英文版本，软件为中文版本) http://www.table2css.com/demo-video ...

    table转div、table转css

    "table2css"是这个过程中使用的工具，它能够自动化地将HTML表格转换为CSS布局的div元素，大大简化了开发者的工作流程。 "table2css.exe"是这个工具的执行文件，用于运行转换过程。"uninst.exe"则是卸载程序，用于从...

    JS 表单验证 使用Frameset+Table布局（div也可）

    2 使用Frameset+Table布局（div也可） 3 对用户ID和用户名、口令不符合条件及时判断 4 对口令不一致进行及时判断 对34的及时判断，要求提示信息必须显示在同一个页面 也就是说显示在当前的行的后面或者上面或者下面 ...

    一个div css 网页 布局 模版

    在网页设计领域，Div CSS布局模版是一种常用的技术，用于构建高效、响应式的网页结构。Div，全称为“Division”，是HTML中的一个区块元素，它允许我们将网页内容划分为多个独立的部分，便于管理和样式化。CSS，即...

    Table2CSS表格转CSS+DIV布局工具

    【标题】"Table2CSS表格转CSS+DIV布局工具"是一款专为网页设计者打造的实用软件，旨在帮助用户将传统的HTML表格布局转换为更现代、更灵活的CSS（层叠样式表）与DIV（定义文档结构的HTML元素）布局。这种转换能够提升...

    div table的使用

    本文将深入探讨如何在服务器端利用存储过程生成`table`数据，并将其嵌入到`div`容器中，以实现更灵活的页面布局。 首先，`div`（division）是HTML中的一个块级元素，它主要用于对页面内容进行分组和布局。通过CSS...

    css+div和table+css的比较

    CSS+div 和 table+css 是网页布局的两种常见方法，它们各有优缺点。首先，我们来看一下 div 和 table 的基本概念。 `div` 是 HTML 中的一个块级元素，用于组织文档的大块内容。它是一个容器，可以容纳其他 HTML ...

    Div仿制table送自定义Scrollbar支持排序

    首先，Div仿制table是通过CSS布局（如Flexbox或Grid）和JavaScript来构建一个看起来和表格类似的结构，这样可以更灵活地控制单元格的样式、行高和列宽，同时还能实现响应式设计。对于不支持这些新特性的老旧浏览器...

    DIV 实现表格布局

    在网页设计中，传统的表格布局通常使用`<table>`、`<tr>`、`<td>`等HTML标签来实现，但随着CSS技术的发展，我们可以通过使用`div`元素结合CSS样式来实现类似表格的布局，这被称为“CSS布局”或“DIV布局”。这种布局...

    网页布局div+css

    现如今随着技术的不断发展，传统的利用table来进行网页布局的技术已经很少使用了，随着div+css的不断兴起，越来越多的人喜欢利用这项技术来进行网页布局，这份资料将给学习这项技术的初学者提供很好的帮助。

    表格转换为div(Table2CSS)

    Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 这个软件原来是老外做的，收费的，但是经北京采摘在线Nodody汉化破解，已经没什么限制，完全可用了。 ...

    为什么我们不建议用Table布局

    Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识，会省去你以后大量的...

    精通DIV+CSS网页样式与布局

    【精通DIV+CSS网页样式与布局】是关于网页设计领域的一个重要主题，它涉及到了现代网页制作的关键技术。随着Web 2.0的发展，传统的表格布局模式已经逐渐被淘汰，取而代之的是基于DIV（Document Object Model中的Div...

    将table转换成div+css

    在网页设计中，传统的HTML表格（table）曾经是布局的重要方式，但由于其对网页加载速度的影响和不灵活性，现代网页设计更多地倾向于使用CSS布局，尤其是div元素配合CSS样式。"将table转换成div+css"这个主题正是针对...

    ASP.NET 企业网站管理系统，Access版，本程序未开源，只适合建站。界面非DIV+CSS，采用老的Table布局，更方便老美工修改程序。

    相比之下，DIV+CSS提供了更好的灵活性和控制力，可以实现更复杂的布局，同时有利于提高页面加载速度和适应不同设备的显示。 对于“老美工”来说，Table布局可能更容易理解和操作，因为它们更直观地反映了页面的物理...

    表格转换DIV+CSS工具Table2CSS破解版

    介绍:Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。 更新说明: 3.0.0 +增加DOM(文档对象模型)查看器，允许调整转换设置. +通用CSS前缀配置默认值"gen". ...

    div模拟table滚动时表头固定，兼容ie6

    - 使用`z-index`属性确保表头div位于表体div之上，以便在滚动时仍然可见。 3. **列宽同步**：为了保持表头和表体的列宽一致，可以监听窗口的`resize`事件，动态调整div的宽度。此外，如果表体中的列宽发生变化，也...

Magicbox
Global site tag (gtag.js) - Google Analytics