网页布局之网页布局之 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栏目三/tdtd栏目四/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这里几点比较注意的是，ul 和 li 可以实现表格的布局，这里每个ul 相当于 table 里面的 tr 实现一行，每个 li 相当于 table 的 td，实现一个单元格。其中需要用到 css 控制它的显示样式，其中 list-style-type:none; 这句话消除 li 前面的项目符号，display:inline; 这句话让 li 标签横向显示。这样就能实现表格的效果。通过这种方式，div 就能实现表格效果。这样一个小小的 div 块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的 div+li 布局。看到很多主流的网站，比如腾讯，网易的网站都大量的使用了这种布局。!- 导航 - DIV nav1 UL LI MARGIN-LEFT: 5px redA href=http:/www.sogou.com/搜狗/A/LI LI MARGIN: 0px 5pxA href=http:/pinyin.sogou.com/输入法/A/LI LIA href=http:/ie.sogou.com/浏览器/A/LI LI MARGIN: 0px 6pxA href=http:/map.sogou.com/地图/A/LI LIA href=http:/mail.sohu.com/邮件/A/LI LI MARGIN: 0px 5px redA href=http:/t.sohu.com/微博/A/LI LIA href=http:/blog.sohu.com/博客/A/LI LI MARGIN: 0px 6pxA href=http:/bai.sohu.com/白社会/A/LI LI fontArial redA href=http:/club.sohu.com/BBS/A/LI LI MARGIN: 0px 5pxA href=http:/class.chinaren.com/校友录/A/LI LI redA href=http:/tv.sohu.com/视频/A/LI LI MARGIN: 0px 6pxA href=http:/my.tv.sohu.com/播客/A/LI LIA href=http:/games.sohu.com/游戏/A/LI LI MARGIN: 0px 5pxA href=http:/tl.sohu.com/天龙/A/LI LI redA href=http:/ldj.changyou.com/鹿鼎记/A/LI LI MARGIN: 0px 6pxA href=http:/www.wap.sohu.com/手机搜狐网/A/LI LIA href=http:/ting.sohu.com/听书/A/LI LI MARGIN: 0px 0 0 5pxA href=http:/game.m.sohu.com/手机游戏/A/LI LI navEndA href=http:/egou.sohu.com/e 购房/A/LI/UL/DIV DIV nav2 UL LI MARGIN: 0px 0px 0px 1pxBR/LI LI redA href=http:/news.sohu.com/新闻/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/pic.news.sohu.com/图片/A/LI LIA href=http:/star.news.sohu.com/评论/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/comment.news.sohu.com/我说两句/A/LI LIA href=http:/mil.news.sohu.com/军事/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/gongyi.sohu.com/公益/A/LI LI redA href=http:/sports.sohu.com/体育/A/LI LI fontArialA href=http:/sports.sohu.com/nba.shtmlNBA/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/sports.sohu.com/zhongchao.shtml中超/A/LI LI fontArial bA href=http:/s.sohu.com/S/A/LI LI MARGIN: 0px 1pxBR/LI LI redA href=http:/business.sohu.com/财经/A/LI LIA href=http:/money.sohu.com/理财/A/LI LIA href=http:/stock.sohu.com/股票/A/LI LIA href=http:/fund.sohu.com/基金/A/LI LI fontArialA href=http:/it.sohu.com/IT/A/LILIA href=http:/digi.it.sohu.com/数码/A/LI LIA href=http:/digi.it.sohu.com/mobile.shtml手机/A/LI LIA href=http:/auto.sohu.com/汽车/A/LI LIA href=http:/goche.sohu.com/购车/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/house.sohu.com/房产/A/LI LIA href=http:/www.51f.com/二手房/A/LI LIA href=http:/home.sohu.com/家居/A/LI LI MARGIN: 0px 1pxBR/LI LI redA href=http:/yule.sohu.com/娱乐/A/LI LIA href=http:/korea.yule.sohu.com/韩娱/A/LI LI MARGIN: 0px 1pxBR/LI LI fontArial bA href=http:/tv.sohu.com/yule/V/A/LI LI navEndA href=http:/music.sohu.com/音乐/A/LI/UL/DIV DIV nav3 UL LIA href=http:/weather.news.sohu.com/天气/A/LI LI MARGIN: 0px 1pxBR/LI LIA href=http:/men.sohu.com/男人/A/LI LI MARGIN: 0px 1pxBR/LI LI redA href=http:/women.sohu.com/女人/A/LI LIA href=http:/beauty.sohu.com/美容/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/baobao.sohu.com/母婴/A/LI LI MARGIN: 0px 3pxBR/LI LIA href=http:/health.sohu.com/健康/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/green.sohu.com/绿色/A/LI LI MARGIN: 0px 3pxBR/LI LIA href=http:/chihe.sohu.com/吃喝/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/citisp.sohu.com/促销/A/LI LI MARGIN: 0px 3pxBR/LI LIA href=http:/travel.sohu.com/旅游/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/golf.sports.sohu.com/高尔夫/A/LI LI MARGIN: 0px 3pxBR/LI LI redA href=http:/cul.sohu.com/文化/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/book.sohu.com/读书/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/vip.book.sohu.com/原创/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/learning.sohu.com/教育/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/goabroad.sohu.com/出国/A/LI LI MARGIN: 0px 2pxBR/LI LI redA href=http:/bschool.sohu.com/商学院/A/LI LI MARGIN: 0px 2pxBR/LI LIA href=http:/sports.sohu.com/cp/彩票/A/LI LI MARGIN: 0px32pxBR/LI LIA href=http:/astro.sohu.com/星座/A/LI LI MARGIN: 0px 3pxBR/LI LIA href=http:/sh.sohu.com/上海/A/LI LI MARGIN: 0px 3pxBR/LI LI navEndA href=http:/gd.sohu.com/广东/A/LI /UL /DIV !- 导航:End - 这里面还有几个小技巧：1：使用 d