网页布局之Div vs Table （2）
2012-03-15 22:14 myjava2 阅读(144) 评论(0) 编辑 收藏 举报大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。
div实现表格效果需要其他标签辅助，这个就是我们的 ul li标签。
假如要实现这么一个表格效果。
那么使用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中设置图片会更加合理，这样增加了搜索引擎发现率。
