div 和table
(一)刚开始腾讯搞下来CSS+DIV布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
/*boby*/
body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-height:22px;}
/*TEXT*/
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
/*导航区域*/
#WWWWW *{font-size:12px;line-height:22px;}
#WWWWW {width:284px;height:133px;overflow:hidden;margin-bottom:10px;border: thin solid #000000;
padding-top: 2px;padding-right: 2;padding-bottom: 2;padding-left: 2px;}
#WWWWW #bx {
overflow:hidden;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
}
#WWWWW span{position:block;margin-right:8px;font-weight:bold;}
#WWWWW a{text-decoration:none;padding:3px 3px 1px 3px;}
#WWWWW a.qq{text-decoration:none;padding:1px;}
#WWWWW a.qq:hover{text-decoration:none;padding:1px 3px 1px 3px;background-color: #F5F5F5;
}
</style>
<div id="WWWWW">
<div id="bx">
<span>通信</span>
<a href="#" class="qq">QQ邮箱</a>
<a href="#" class="qq">QQ软件</a>
<a href="#" class="qq">QQ秀</a>
<a href="#" class="qq">会员</a>
<a href="#" class="qq">号码</a>
<a href="#" class="qq">和悦</a>
</div>
<div id="bx">
<span>社区</span>
<a href="#" class="qq">空间</a>
<a href="#" class="qq">相册</a>
<a href="#" class="qq">音乐</a>
<a href="#" class="qq">视频</a>
<a href="#" class="qq">直播</a>
<a href="#" class="qq">Q吧</a>
<a href="#" class="qq">交友</a>
</div>
<div id="bx">
<span>休闲</span>
<a href="#" class="qq">QQ游戏</a>
<a href="#" class="qq">炫舞</a>
<a href="#" class="qq">QQ宠物</a>
<a href="#" class="qq">飞车</a>
<a href="#" class="qq">音速</a>
<a href="#" class="qq">QQ堂</a>
</div>
<div id="bx">
<span>网游</span>
<a href="#" class="lchot">地下勇士</a>
<a href="#" class="qq">寻仙</a>
<a href="#" class="qq">穿越火线</a>
<a href="#" class="qq">自幻想</a>
<a href="#" class="qq">三国</a>
</div>
<div id="bx">
<span>手机</span>
<a href="#" class="qq">QQ无线</a>
<a href="#" class="qq">超级QQ</a>
<a href="#" class="qq">手机游戏</a>
<a href="#" class="qq">手机QQ</a>
<a href="#" class="qq">爱墙</a>
</div>
<div id="bx">
<span>商务</span>
<a href="#" class="qq">拍拍网</a>
<a href="#" class="qq">财付通</a>
<a href="#" class="qq">QQ充值</a>
<a href="#" class="qq">手机充值</a>
<a href="#" class="qq">更多</a>
</div>
</div>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
社区 空间 相册 音乐 视频 直播 Q吧 交友
休闲 QQ游戏 炫舞 QQ宠物 飞车 音速 QQ堂
网游 地下勇士 寻仙 穿越火线 自幻想 三国
手机 QQ无线 超级QQ 手机游戏 手机QQ 爱墙
商务 拍拍网 财付通 QQ充值 手机充值 更多
------------------------------------------------------------------------------
(二)我改成了ＤＩＶ＋ＣＳＳ＋ＵＬ＋ＬＩ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
/*boby*/
body{margin:0;background:#fff;font-size:13px;line-height:22px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
/*TEXT*/
a{color:#00007F;text-decoration:none;}
a:hover{color:#bd0a01;text-decoration:underline;}
/*导航区域*/
#WWWWW *{font-size:12px;line-height:22px;list-style-type: none;margin: 0px;padding: 0px;}
#WWWWW {border: thin solid #000000;width: 258px;overflow: hidden;}
#WWWWW #bx {border-bottom-width: 1px;border-bottom-style: dotted;border-bottom-color: #999999;
overflow: hidden;}
#WWWWW #bx li {float: left;}
#WWWWW #bx ul span{position:block;font-weight:bold;float: left;margin-right: 8px;padding: 0px;}
#WWWWW #bx ul li a{text-decoration:none;}
#WWWWW #bx ul li a.qq{text-decoration:none;padding-right: 6px;}
#WWWWW #bx ul li a.qq:hover{text-decoration:none;background-color: #F5F5F5;}
</style>
<div id="WWWWW">
<div id="bx">
<UL><span>通信</span>
<li><a href="#" class="qq">QQ邮箱</a></li>
<li><a href="#" class="qq">QQ软件</a></li>
<li><a href="#" class="qq">QQ秀</a></li>
<li><a href="#" class="qq">会员</a></li>
<li><a href="#" class="qq">号码</a></li>
<li><a href="#" class="qq">和悦</a></li>
</UL>
</div>
<div id="bx">
<UL><span>社区</span>
<li><a href="#" class="qq">空间</a></li>
<li><a href="#" class="qq">相册</a></li>
<li><a href="#" class="qq">音乐</a></li>
<li><a href="#" class="qq">视频</a></li>
<li><a href="#" class="qq">直播</a></li>
<li><a href="#" class="qq">Q吧</a></li>
<li><a href="#" class="qq">交友</a></li>
</UL>
</div>
<div id="bx">
<UL> <span>休闲</span>
<li><a href="#" class="qq">QQ游戏</a></li>
<li><a href="#" class="qq">炫舞</a></li>
<li><a href="#" class="qq">QQ宠物</a></li>
<li><a href="#" class="qq">飞车</a></li>
<li><a href="#" class="qq">音速</a></li>
<li><a href="#" class="qq">QQ堂</a></li>
</UL>
</div>
<div id="bx">
<UL><span>网游</span>
<li><a href="#" class="lchot">地下勇士</a></li>
<li><a href="#" class="qq">寻仙</a></li>
<li><a href="#" class="qq">穿越火线</a></li>
<li><a href="#" class="qq">自幻想</a></li>
<li><a href="#" class="qq">三国</a></li>
</UL>
</div>
<div id="bx">
<UL><span>手机</span>
<li><a href="#" class="qq">QQ无线</a></li>
<li><a href="#" class="qq">超级QQ</a></li>
<li><a href="#" class="qq">手机游戏</a></li>
<li><a href="#" class="qq">手机QQ</a></li>
<li><a href="#" class="qq">爱</a></li>
</UL>
</div>
<div id="bx">
<UL><span>商务</span>
<li><a href="#" class="qq">拍拍网</a></li>
<li><a href="#" class="qq">财付通</a></li>
<li><a href="#" class="qq">QQ充值</a></li>
<li><a href="#" class="qq">手机充值</a></li>
<li><a href="#" class="qq">更多</a></li>
</UL>
</div>
</div>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
社区 空间 相册 音乐 视频 直播 Q吧 交友
休闲 QQ游戏 炫舞 QQ宠物 飞车 音速 QQ堂
网游 地下勇士 寻仙 穿越火线 自幻想 三国
手机 QQ无线 超级QQ 手机游戏 手机QQ 爱墙
商务 拍拍网 财付通 QQ充值 手机充值 更多
-------------------------------------------------------------------------------
(三)dl+dt+dd版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body{font-size:12px;}
.nav-sub *{ margin:0; padding:0;}
.nav-sub dl dt{ font-weight:bold;}
.nav-sub dl dt,.nav-sub dl dd{ display:inline; zoom:1;}
.nav-sub dl dd a{ padding:0 5px;}
</style>
<div class="nav-sub">
<dl class="list1">
<dt>通信</dt>
<dd><a href="#" class="qq">QQ邮箱</a></dd>
<dd><a href="#" class="qq">QQ软件</a></dd>
<dd><a href="#" class="qq">QQ秀</a></dd>
<dd><a href="#" class="qq">会员</a></dd>
<dd><a href="#" class="qq">号码</a></dd>
<dd><a href="#" class="qq">和悦</a></dd>
</dl>
</div>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
----------------------------------------------------------------------
(四)最后我用ＴＡＢＬＥ+TD+TR实验下 用表格+CSS
<!DOCTYPE html PUBLIC "-//W3C//spanD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/spanD/xhtml1-transitional.spand">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body{font-size:12px;}
.nav-sub *{ margin:0; patding:0;}
.span{ font-weight:bold;}
.nav-sub tr td a{patding:0 5px;text-decoration: none;
}
</style>
<table class="nav-sub">
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
<tr>
<td class="span">通信</td>
<td><a href="#" class="qq">QQ邮箱</a></td>
<td><a href="#" class="qq">QQ软件</a></td>
<td><a href="#" class="qq">QQ秀</a></td>
<td><a href="#" class="qq">会员</a></td>
<td><a href="#" class="qq">号码</a></td>
<td><a href="#" class="qq">和悦</a></td>
</tr>
</table>
输出如下
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
通信 QQ邮箱 QQ软件 QQ秀 会员 号码 和悦
我的CSS兼容性基本已经到位了,以前总是不会做CSS+DIV+UL+LI
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/gabriel80/archive/2009/03/12/3985002.aspx
div 和table相关推荐
- DIV与Table布局在大型网站的可用性比较
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就 ...
- 转: Div与table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
- div与table的区别
div 和 table 的区别是加载方式. div的加载方式是即读即加载,遇到<div>,没有遇到</div>的时候,一样加载div中的内容,读多少加载多少. table的加载 ...
- html table字体居中 css,CSS如何让DIV和table居中但是让其中的文字不居中
这篇文章主要为大家详细介绍了CSS如何让DIV和table居中但是让其中的文字不居中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 我们在写网页代码的时候经常会 ...
- 包含多个table的html整体居中,css实现div或table居中，文字不居中【Chrome/Firefox/IE测试通过】...
之前设计网页,如果希望div或table居中,总是用 把它包起来,但是这样的结果,div或table虽然居中了,但div或table里面的文字也居中了,这是不符合设计者意愿的.那么,我们能否用css实 ...
- [转]div里table居中的问题 Div与body顶部间隙
本文转自:http://www.cnblogs.com/jinhui/archive/2008/09/24/1297729.html 将div的text-align设为center,然后将table的 ...
- js代码收集(1)_隐藏div、table间隔样式设置
切换按钮并且隐藏div function hiddenObject(arg){ var obj; if(arg instanceof Object){ obj = arg; } else { obj ...
- 使用DIV之后 table何去何从
表格并非鸡肋 相反是一道大餐 XHTML标准中的一些元素分为三大类: 辅助布局设计元素:DIV SPAN 这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩 ...
- html 替代table,Iframe的缺点，div或者table成为替代者
1.在网页中使用框架结构最大的弊病是搜索引擎的"蜘蛛"程序无法解读这种页面.当"蜘蛛"程序遇到由数个框架组成的网页时,它们只看到框架而 无法找到链接,因此它们会 ...
- html知识笔记（二）——div、table、a标签
div标签:我们把一些标签放进<div>里,划分出一个独立的逻辑部分.为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这 ...
最新文章
- Java中如何实现Date与String之间的数据类型转换
- 不能成为专业软件测试人员的10大理由
- python绘图实例-Python matplotlib基础绘图函数示例
- php 多维数组 array sort 排序 :array_multisort
- 提高团队整体能力－同一片天“技术交流会”
- RecyclerView用法--展示多种类型Item数据
- 查找、移除某个视图上的某类控件
- 02_python是一种什么语言？
- Ignoring query to other database
- openfire log4j:ERROR setFile(null,true) call failed.
- 深度学习之数据增强方案和TensorFlow操作
- Linux debian 查看CPU温度
- div.php织梦自定义表判断不能为空,织梦使用if判断某个字段是否为空
- Win7 64bit IIS无法访问ACCESS数据库解决方案
- 20145326蔡馨熤《计算机病毒》——静态分析（2）
- windows查看linux文件工具,「实用工具」介绍几款Windows系统与Linux服务器传递文件的工具...
- mkdir命令、chmod修改权限、利用scp 远程上传下载文件/文件夹
- dingo php,laravel 中安装 Dingo API 基本设置
- pareto解是什么意思_Pareto是什么意思_Pareto的翻译_音标_读音_用法_例句_爱词霸在线词典...
- Android USB 扫码枪获取扫描内容