(一)刚开始腾讯搞下来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充值 手机充值 更多
------------------------------------------------------------------------------
(二)我改成了DIV+CSS+UL+LI
<!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秀 会员 号码 和悦
----------------------------------------------------------------------
(四)最后我用TABLE+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