當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div 和table

發布時間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

輸出如下

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

上一篇： PyGTK中文版
下一篇： java 网站开发实例_完整的javaw