- 用純CSS代碼實(shí)現(xiàn)tabs標(biāo)簽效果，手工代碼實(shí)現(xiàn)，很實(shí)在的TAB選項(xiàng)卡菜單，其實(shí)看懂了代碼，你會覺得如此簡單就可寫一個tab了，用了不少CSs的基礎(chǔ)知識，通過此，你也許會更加熟悉如何使用Div
CSS布局網(wǎng)頁。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/XHTML1/DTD/XHTML1-strict.dtd">
- <html xmlns="http://www./1999/xhtml" lang="en" xml:lang="en">
- <head>
- <title>CSS Tabs實(shí)例</title>
- <style type="text/css" media="all">
- #globalnav {
- position:relative;
- float:left;
- width:100%;
- padding:0 0 1.75em 1em;
- margin:0;
- list-style:none;
- line-height:1em;
- }
- #globalnav LI {
- float:left;
- margin:0;
- padding:0;
- }
- #globalnav A {
- display:block;
- color:#444;
- text-decoration:none;
- font-weight:bold;
- background:#ddd;
- margin:0;
- padding:0.25em 1em;
- border-left:1px solid #fff;
- border-top:1px solid #fff;
- border-right:1px solid #aaa;
- }
-
- #globalnav A:hover,
- #globalnav A:active,
- #globalnav A.here:link,
- #globalnav A.here:visited {
- background:#bbb;
- }
- #globalnav A.here:link,
- #globalnav A.here:visited {
- position:relative;
- z-index:102;
- }
-
- #globalnav UL {
- position:absolute;
- left:0;
- top:1.5em;
- float:left;
- background:#bbb;
- width:100%;
- margin:0;
- padding:0.25em 0.25em 0.25em 1em;
- list-style:none;
- border-top:1px solid #fff;
- }
- #globalnav UL LI {
- float:left;
- display:block;
- margin-top:1px;
- }
- #globalnav UL A {
- background:#bbb;
- color:#fff;
- display:inline;
- margin:0;
- padding:0 1em;
- border:0
- }
- #globalnav UL A:hover,
- #globalnav UL A:active,
- #globalnav UL A.here:link,
- #globalnav UL A.here:visited {
- color:#444;
- }
- </style>
- </head>
- <body>
- <div>
- <h1>CSS tabs</h1>
- <ul id="globalnav">
- <li><a href="#">我的首頁</a></li>
- <li><a href="#" class="here">About</a>
- <ul>
- <li><a href="#">版本</a></li>
- <li><a href="#">夢想</a></li>
- <li><a href="#">截圖</a></li>
- <li><a href="#">Careers</a></li>
- <li><a href="#" class="here">歷史</a></li>
- <li><a href="#">支持</a></li>
- </ul>
- </li>
- <li><a href="#">新聞</a></li>
- <li><a href="#">時速</a></li>
- <li><a href="#">Process</a></li>
- <li><a href="#">實(shí)例</a></li>
- <li><a href="#">Help</a></li>
- </ul>
- </div>
- </body>
- </html>
- 邁登購原文轉(zhuǎn)載
|
