1200字范文 > 引用 CSS+DIV/Ul+LI/dl+dt+dd/tabale+css 样式

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

时间：2022-06-22 12:23:59

(一)刚开始腾讯搞下来CSS+DIV布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

</div>

</div>

</div>

</div>

</div>

输出如下

通信QQ邮箱 QQ软件 QQ秀会员号码和悦社区空间相册音乐视频直播 Q吧交友休闲QQ游戏炫舞 QQ宠物飞车音速 QQ堂网游地下勇士寻仙穿越火线自幻想三国手机QQ无线超级QQ 手机游戏手机QQ 爱墙商务拍拍网财付通 QQ充值手机充值更多

------------------------------------------------------------------------------

(二)我改成了ＤＩＶ＋ＣＳＳ＋ＵＬ＋ＬＩ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

</UL>

</div>

</UL>

</div>

</UL>

</div>

</UL>

</div>

</UL>

</div>

</UL>

</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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>

</dl>

</div>

输出如下

通信QQ邮箱QQ软件QQ秀会员号码和悦

----------------------------------------------------------------------

(四)最后我用ＴＡＢＬＥ+TD+TR实验下用表格+CSS

<!DOCTYPE html PUBLIC "-//W3C//spanD XHTML 1.0 Transitional//EN" "/TR/xhtml1/spanD/xhtml1-transitional.spand">

<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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

输出如下

通信QQ邮箱QQ软件QQ秀会员号码和悦

通信QQ邮箱QQ软件QQ秀会员号码和悦

我的CSS兼容性基本已经到位了,以前总是不会做CSS+DIV+UL+LI

转自：/%D6%EC%C3%F7%B2%A9%BF%CD/blog/item/8ca407fbccb85d18a8d311a8.html多谢朱明的支持

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。