純CSS寫的選項卡效果

2024-07-11 08:34:10

字體：大中小

來源：轉載

供稿：網友

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”><br /><meta http-equiv=”content-language” content=”zh-cn” /><br /><meta http-equiv=”content-type” content=”text/html;charset=gb2312″ /><br /><style><br />dl {<br />position:absolute;<br />width:240px;<br />height:170px;<br />border:10px solid #eee;<br />}<br />dd {<br />margin:0;<br />width:240px;<br />height:170px;<br />overflow:hidden;<br />}<br />dt {<br />position:absolute;<br />right:1px;<br />}<br />ul {<br />margin:0;<br />padding:0;<br />width:260px;<br />height:170px;<br />list-style:none;<br />background:url(“//files.Vevb.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif”) no-repeat 75% 20px;<br />border:1px solid #ccc<br />}<br />/*#b {<br />background-position:75% center<br />}<br />#c {<br />background-position:75% 86%<br />}*/<br />li {<br />width:205px;<br />height:27px;<br />font:12px/27px “宋體”,sans-serif;<br />white-space:nowrap;<br />overflow:hidden;<br />}<br />dt a {<br />display:block;<br />margin:1px;<br />width:30px;<br />height:56px;<br />text-align:center;<br />font:700 12px/55px “宋體”,sans-serif;<br />color:#fff;<br />text-decoration:none;<br />background:#666;<br />}<br />dt a:hover {<br />background:orange<br />}<br /></style><br /><head/><br /><body><br /><dl><br /><dt><a href=”#a” title=””>新聞</a><a href=”#b” title=””>娛樂</a><a href=”#c” title=””>體育</a></dt><br /><dd><br /><ul id=”a”><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /><li>·<a href=”” title=””>國際新聞國際新聞國際新聞</a></li><br /></ul><br /><ul id=”b”><br /><li>·<a href=”” title=””>娛樂新聞娛樂新聞娛樂新聞</a></li><br /><li>·<a href=”” title=””>娛樂新聞娛樂新聞娛樂新聞</a></li><br /><li>·<a href=”” title=””>娛樂新聞娛樂新聞娛樂新聞</a></li> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1341658.html'>純CSS3實現繪制各種圖形實現代碼詳細整理</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1341660.html'>CSS重置(CSS Reset) 讓網頁樣式在各瀏覽器中表現一致</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1341659">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1341659&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流