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

网页布局之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布局网页转换为div+CSS布局的转换软件. 非常快捷方便,一转眼一个老式样table布局网页的网页就转换成div+CSS布局的了,支持绝对定位和流定位.

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

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

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

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

    网页布局div+css

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

    表格转换为div(Table2CSS)

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

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

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

    Table2CSS表格转CSS+DIV布局工具

    可以把表格布局转变成CSS+DIV布局。

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

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

    DIV+CSS布局实例

    DIV+CSS布局实例 浅谈网页制作中table与div方法布局网页框架的利和弊.pdf - 下载...

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

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

    Table2CSSConverter4.2.4

    Table2CSS Converter这是一个搜索引擎优化工具，转换成网页的HTML代码表tableless的CSS 。...Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录批量转换。

    html5 div布局与table布局详解

    本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 #container中height不能写成百分数，必须为具体高度。 <!DOCTYPE html> <html> <head lang=...

    HTML css DIV 网页布局

    DIV+CSS 网页重构 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现...

    DIV 实现表格布局

    不用到table标签也能实现 table功能。

    漂亮的网站源码30个【华丽的JS特效+DIV控制布局】

    所有网站都采用CSS控制样式展现，没有table，都是DIV控制布局！更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计，譬如图片站、门户站、企业站、宠物站、资讯站等等，而且足够让您欣喜的是绝大...

    DIV+CSS 网页布局心得

    我们在jb51.net一直强调...　首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。 　然后你要知

    DIV与Table布局在大型网站的可用性比较

    DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说：DIV用于布局，而TABLE则本来就是转二维数据的。让TABLE做该做的事，并不是说页面里不出现TABLE就是多么多么牛。 　DIV是标准，...

    DIV+CSS之弹性盒模型布局

    这是我自己项目总结的一些布局方法，基于DIV+CSS实现的一种弹性盒模型布局，主要利用display:table-cell;这一属性来实现，兼容良好，可扩展性也比较强。适用于做前端重构、架构的童鞋。

    Table2CSS Converter V3.0.0 汉化版

    Table2CSS Converter V3.0.0 汉化版将表格布局网页完美转换成DIV+CSS方式

    div+css table布局实现代码

    是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个...

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