网页布局之Div vs Table （2）

最新推荐文章于 2019-06-12 23:46:38 发布

lsh6688

最新推荐文章于 2019-06-12 23:46:38 发布

阅读量6.3k

点赞数 2

分类专栏：【J2EE】文章标签： div table class 搜索引擎手机游戏输入法

本文链接：https://blog.csdn.net/lsh6688/article/details/7358839

版权

【J2EE】专栏收录该内容

13 篇文章 0 订阅

订阅专栏

大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。

div实现表格效果需要其他标签辅助，这个就是我们的 ul li标签。

假如要实现这么一个表格效果。

那么使用table布局的代码是这样：

<html>
<head>
</head>
<body>
    <table>
		<tr>
			<td>栏目一</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>
<head>
	<style type="text/css">
		ul li{
			list-style-type:none;
			display:inline;
		}
</style>
</head>
<body>
	<div>
	<ul>
		<li>栏目一</li>
		<li>栏目二</li>
		<li>栏目三</li>
		<li>栏目四</li>
	<ul>
	</div>
	<div>
	<ul>
		<li>栏目一</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; 这句话让li标签横向显示。这样就能实现表格的效果。

通过这种方式，div就能实现表格效果。这样一个小小的div块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的div+li布局。看到很多主流的网站，比如腾讯，网易的网站都大量的使用了这种布局。

<!-- 导航 --> 


<DIV class=nav1> 

<UL> 

<LI style="MARGIN-LEFT: 5px" class=red><A href="http://www.sogou.com/">搜狗</A></LI> 

<LI style="MARGIN: 0px 5px"><A href="http://pinyin.sogou.com/">输入法</A></LI> 

<LI><A href="http://ie.sogou.com/">浏览器</A></LI> 

<LI style="MARGIN: 0px 6px"><A href="http://map.sogou.com/">地图</A></LI> 

<LI><A href="http://mail.sohu.com/">邮件</A></LI> 

<LI style="MARGIN: 0px 5px" class=red><A href="http://t.sohu.com/">微博</A></LI> 

<LI><A href="http://blog.sohu.com/">博客</A></LI> 

<LI style="MARGIN: 0px 6px"><A href="http://bai.sohu.com/">白社会</A></LI> 

<LI class="fontArial red"><A href="http://club.sohu.com/">BBS</A></LI> 

<LI style="MARGIN: 0px 5px"><A href="http://class.chinaren.com/">校友录</A></LI> 

<LI class=red><A href="http://tv.sohu.com/">视频</A></LI> 

<LI style="MARGIN: 0px 6px"><A href="http://my.tv.sohu.com/">播客</A></LI> 

<LI><A href="http://games.sohu.com/">游戏</A></LI> 

<LI style="MARGIN: 0px 5px"><A href="http://tl.sohu.com/">天龙</A></LI> 

<LI class=red><A href="http://ldj.changyou.com/">鹿鼎记</A></LI> 

<LI style="MARGIN: 0px 6px"><A href="http://www.wap.sohu.com/">手机搜狐网</A></LI> 

<LI><A href="http://ting.sohu.com/">听书</A></LI> 

<LI style="MARGIN: 0px 0 0 5px"><A href="http://game.m.sohu.com/">手机游戏</A></LI> 

<LI class=navEnd><A href="http://egou.sohu.com/">e购房</A></LI></UL></DIV> 

<DIV class=nav2> 

<UL> 

<LI style="MARGIN: 0px 0px 0px 1px"><BR></LI> 

<LI class=red><A href="http://news.sohu.com/">新闻</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://pic.news.sohu.com/">图片</A></LI> 

<LI><A href="http://star.news.sohu.com/">评论</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://comment.news.sohu.com/">我说两句</A></LI> 

<LI><A href="http://mil.news.sohu.com/">军事</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://gongyi.sohu.com/">公益</A></LI> 

<LI class=red><A href="http://sports.sohu.com/">体育</A></LI> 

<LI class=fontArial><A href="http://sports.sohu.com/nba.shtml">NBA</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://sports.sohu.com/zhongchao.shtml">中超</A></LI> 

<LI class="fontArial b"><A href="http://s.sohu.com/">S</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI class=red><A href="http://business.sohu.com/">财经</A></LI> 

<LI><A href="http://money.sohu.com/">理财</A></LI> 

<LI><A href="http://stock.sohu.com/">股票</A></LI> 

<LI><A href="http://fund.sohu.com/">基金</A></LI> 

<LI class=fontArial><A href="http://it.sohu.com/">IT</A></LI> 

<LI><A href="http://digi.it.sohu.com/">数码</A></LI> 

<LI><A href="http://digi.it.sohu.com/mobile.shtml">手机</A></LI> 

<LI><A href="http://auto.sohu.com/">汽车</A></LI> 

<LI><A href="http://goche.sohu.com/">购车</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://house.sohu.com/">房产</A></LI> 

<LI><A href="http://www.51f.com/">二手房</A></LI> 

<LI><A href="http://home.sohu.com/">家居</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI class=red><A href="http://yule.sohu.com/">娱乐</A></LI> 

<LI><A href="http://korea.yule.sohu.com/">韩娱</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI class="fontArial b"><A href="http://tv.sohu.com/yule/">V</A></LI> 

<LI class=navEnd><A href="http://music.sohu.com/">音乐</A></LI></UL></DIV> 

<DIV class=nav3> 

<UL> 

<LI><A href="http://weather.news.sohu.com/">天气</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI><A href="http://men.sohu.com/">男人</A></LI> 

<LI style="MARGIN: 0px 1px"><BR></LI> 

<LI class=red><A href="http://women.sohu.com/">女人</A></LI> 

<LI><A href="http://beauty.sohu.com/">美容</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://baobao.sohu.com/">母婴</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI><A href="http://health.sohu.com/">健康</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://green.sohu.com/">绿色</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI><A href="http://chihe.sohu.com/">吃喝</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://citisp.sohu.com/">促销</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI><A href="http://travel.sohu.com/">旅游</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://golf.sports.sohu.com/">高尔夫</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI class=red><A href="http://cul.sohu.com/">文化</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://book.sohu.com/">读书</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://vip.book.sohu.com/">原创</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://learning.sohu.com/">教育</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://goabroad.sohu.com/">出国</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI class=red><A href="http://bschool.sohu.com/">商学院</A></LI> 

<LI style="MARGIN: 0px 2px"><BR></LI> 

<LI><A href="http://sports.sohu.com/cp/">彩票</A></LI> 

<LI style="MARGIN: 0px32px"><BR></LI> 

<LI><A href="http://astro.sohu.com/">星座</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI><A href="http://sh.sohu.com/">上海</A></LI> 

<LI style="MARGIN: 0px 3px"><BR></LI> 

<LI class=navEnd><A href="http://gd.sohu.com/">广东</A></LI> 

</UL> 

</DIV> 

<!-- 导航:End -->

这里面还有几个小技巧：

1：使用div+h标签为网站添加标题栏目，div中嵌套h标签组织网站结构，这样更有助于搜索引擎发现你地网站，因为搜索引擎是通过h标签组织网站的搜索结构的。

2：li中一般会出现p标签，a标签和span标签三种，其中a标签是为了添加链接，p+span是为了显示文字的。

3：对于网站的logo，使用h标签加上css中设置图片会更加合理，这样增加了搜索引擎发现率。

lsh6688

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
网页布局之Div vs Table （2）

大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。div实现表格效果需要其他标签辅助，这个就是我们的 ul li标签。假如要实现这么一个表格效果。那么使用table布局的代码是这样：栏目一栏目二栏目三栏目四
复制链接

扫一扫