純CSS寫的選項卡效果

2024-07-11 08:48:36

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><meta http-equiv="content-language" content="zh-cn" /><meta http-equiv="content-type" content="text/html;charset=gb2312" /><style>dl {position:absolute;width:240px;height:170px;border:10px solid #eee;}dd {margin:0;width:240px;height:170px;overflow:hidden;}dt {position:absolute;right:1px;}ul {margin:0;padding:0;width:260px;height:170px;list-style:none;background:url("http://files.VeVb.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;border:1px solid #ccc}/*#b {background-position:75% center}#c {background-position:75% 86%}*/li {width:205px;height:27px;font:12px/27px "宋體",sans-serif;white-space:nowrap;overflow:hidden;}dt a {display:block;margin:1px;width:30px;height:56px;text-align:center;font:700 12px/55px "宋體",sans-serif;color:#fff;text-decoration:none;background:#666;}dt a:hover {background:orange}</style><head/><body><dl><dt><a href="#a" title="">新聞</a><a href="#b" title="">娛樂</a><a href="#c" title="">體育</a></dt><dd><ul id="a"><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li><li>·<a href="" title="">國際新聞國際新聞國際新聞</a></li></ul><ul id="b"><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li><li>·<a href="" title="">娛樂新聞娛樂新聞娛樂新聞</a></li></ul><ul id="c"><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li><li>·<a href="" title="">體育新聞體育新聞體育新聞</a></li></ul></dd></dl></body></html>

提示：您可以先修改部分代碼再運行

上一篇：在css3中background-clip屬性與background-origin屬性的用法介紹

下一篇：CSS控制頁面最大最小寬度和高度可兼容IE6版本的實現方法