网页布局之div-vs-table-(2)

《网页布局之div-vs-table-(2)》由会员分享，可在线阅读，更多相关《网页布局之div-vs-table-(2)（8页珍藏版）》请在金锄头文库上搜索。

1、网页布局之网页布局之 Div-vs-Table-(2)Div-vs-Table-(2)网页布局之 Div vs Table （2）网页布局之 Div vs Table （2）大家都知道 table 可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div 的表格效果，其实 div 也能实现比较好的表格效果，下面为大家演示一下。div 实现表格效果需要其他标签辅助，这个就是我们的 ulli 标签。假如要实现这么一个表格效果。那么使用 table 布局的代码是这样：htmlhead/headbody tabletrtd栏目一/tdtd栏目二/tdtd栏目三/td

2、td栏目四/tdtrtrtd内容一/tdtd内容二/tdtd内容三/tdtd内容四/tdtr/table/table/body/html同样的使用 div 实现这样的效果也特别简单，看看 div 的代码htmlheadstyle type=text/cssul lilist-style-type:none;display:inline;/style/headbodydivulli栏目一/lili栏目二/lili栏目三/lili栏目四/liul/divdiv ulli栏目一/lili栏目二/lili栏目三/lili栏目四/li ul/div/table/body/html这里几点比较注意的是，u

3、l 和 li 可以实现表格的布局，这里每个ul 相当于 table 里面的 tr 实现一行，每个 li 相当于 table 的 td，实现一个单元格。其中需要用到 css 控制它的显示样式，其中 list-style-type:none; 这句话消除 li 前面的项目符号，display:inline; 这句话让 li 标签横向显示。这样就能实现表格的效果。通过这种方式，div 就能实现表格效果。这样一个小小的 div 块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的 div+li 布局。看到很多主流的网站，比如腾讯，网易的网站都大量

4、的使用了这种布局。!- 导航 - DIV class=nav1 UL LI style=MARGIN-LEFT: 5px class=redA href=http:/ LI style=MARGIN: 0px 5pxA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 6pxA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 5px class=redA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 6pxA href=http:/ LI cla

5、ss=fontArial redA href=http:/ LI style=MARGIN: 0px 5pxA href=http:/ LI class=redA href=http:/ LI style=MARGIN: 0px 6pxA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 5pxA href=http:/ LI class=redA href=http:/ LI style=MARGIN: 0px 6pxA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 0 0 5pxA href

6、=http:/ LI class=navEndA href=http:/ 购房/A/LI/UL/DIV DIV class=nav2 UL LI style=MARGIN: 0px 0px 0px 1pxBR/LI LI class=redA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=htt

7、p:/ LI class=redA href=http:/ LI class=fontArialA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=http:/ LI class=fontArial bA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LI class=redA href=http:/ LIA href=http:/ LIA href=http:/ LIA href=http:/ LI class=fontArialA href=http:/ href=http:/ LIA href=h

8、ttp:/ LIA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=http:/ LIA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LI class=redA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LI class=fontArial bA href=http:/ LI class=navEndA href=http:/ DIV class=nav3 UL L

9、IA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 1pxBR/LI LI class=redA href=http:/ LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI

10、 LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI LI class=redA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http

11、:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LI class=redA href=http:/ LI style=MARGIN: 0px 2pxBR/LI LIA href=http:/ LI style=MARGIN: 0px32pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI LIA href=http:/ LI style=MARGIN: 0px 3pxBR/LI LI class=navEndA href=http:/ /UL /DIV !- 导航:End - 这里面还有几个小技巧：1：使用 d