引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式
(一)剛開始騰訊搞下來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;}
/*導航區(qū)域*/
#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>社區(qū)</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>網(wǎng)游</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">拍拍網(wǎng)</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ū) 空間 相冊 音樂 視頻 直播 Q吧 交友 休閑 QQ游戲 炫舞 QQ寵物 飛車 音速 QQ堂 網(wǎng)游 地下勇士 尋仙 穿越火線 自幻想 三國 手機 QQ無線 超級QQ 手機游戲 手機QQ 愛墻 商務 拍拍網(wǎng) 財付通 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;}
/*導航區(qū)域*/
#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>社區(qū)</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>網(wǎng)游</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">拍拍網(wǎng)</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ū) 空間 相冊 音樂 視頻 直播 Q吧 交友 休閑 QQ游戲 炫舞 QQ寵物 飛車 音速 QQ堂 網(wǎng)游 地下勇士 尋仙 穿越火線 自幻想 三國 手機 QQ無線 超級QQ 手機游戲 手機QQ 愛墻商務 拍拍網(wǎng) 財付通 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兼容性基本已經(jīng)到位了,以前總是不會做CSS+DIV+UL+LI
?
轉(zhuǎn)自：http://hi.baidu.com/%D6%EC%C3%F7%B2%A9%BF%CD/blog/item/8ca407fbccb85d18a8d311a8.html?多謝朱明的支持
總結
以上是生活随笔為你收集整理的引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mysql更新插入
- 下一篇： web基础学习（十四）CSS3多列布局