當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式

發(fā)布時間：2023/12/10 CSS 41 豆豆

生活随笔收集整理的這篇文章主要介紹了引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

(一)剛開始騰訊搞下來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;}
/*導(dǎo)航區(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>商務(wù)</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ù) 拍拍網(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;}
/*導(dǎo)航區(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>商務(wù)</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ù) 拍拍網(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?多謝朱明的支持

總結(jié)

以上是生活随笔為你收集整理的引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。