欢迎来到天天文库
浏览记录
ID：14268045
大小：39.50 KB
页数：8页
时间：2018-07-27
《网页布局之div-vs-table-(2)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、网页布局之Div-vs-Table-(2)网页布局之DivvsTable（2）网页布局之DivvsTable（2）大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。div实现表格效果需要其他标签辅助，这个就是我们的ulli标签。假如要实现这么一个表格效果。那么使用table布局的代码是这样：<html><head></head><body><table><tr><td>栏目一<
2、;/td><td>栏目二</td><td>栏目三</td><td>栏目四</td><tr><tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><tr></table></table></body></html>同样的使用div实现这样的效果也特别简单，看看div的代码<html&g
3、t;<head><styletype="text/css">ulli{list-style-type:none;display:inline;}</style></head><body><div><ul><li>栏目一</li><li>栏目二</li><li>栏目三</li><li>栏目四</li><ul></div><div><ul><li
4、>栏目一</li><li>栏目二</li><li>栏目三</li><li>栏目四</li><ul></div></table></body></html>这里几点比较注意的是，ul和li可以实现表格的布局，这里每个ul相当于table里面的tr实现一行，每个li相当于table的td，实现一个单元格。其中需要用到css控制它的显示样式，其中list-style-type:none;这句话消除li前面的项目符号，display:inline;这句
5、话让li标签横向显示。这样就能实现表格的效果。通过这种方式，div就能实现表格效果。这样一个小小的div块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的div+li布局。看到很多主流的网站，比如腾讯，网易的网站都大量的使用了这种布局。<!--导航--><DIVclass=nav1><UL><LIstyle="MARGIN-LEFT:5px"class=red><Ahref="http://www.sogou.com/">搜狗</
6、A></LI><LIstyle="MARGIN:0px5px"><Ahref="http://pinyin.sogou.com/">输入法</A></LI><LI><Ahref="http://ie.sogou.com/">浏览器</A></LI><LIstyle="MARGIN:0px6px"><Ahref="http://map.sogou.com/">
7、地图</A></LI><LI><Ahref="http://mail.sohu.com/">邮件</A></LI><LIstyle="MARGIN:0px5px"class=red><Ahref="http://t.sohu.com/">微博</A&
此文档下载收益归作者所有
