div 和table

最新推荐文章于 2024-07-18 13:52:01 发布

xianspace

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量471

点赞数

分类专栏：经验文章标签： div table class qq xhtml 手机游戏

本文链接：https://blog.csdn.net/xianspace/article/details/4692221

版权

经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

(一)刚开始腾讯搞下来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>

输出如下

(三)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

xianspace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 和table

(一)刚开始腾讯搞下来CSS+DIV布局http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">/*boby*/body{margin:0;padding:0 0 12px 0;background:#fff;font-size:13px;line-height:22px;}/
复制链接

扫一扫

专栏目录