模仿微軟CSS滑動門（TAB）

2024-09-05 12:19:24

字體：大中小

來源：轉載

供稿：網友

模仿微軟中國首頁的CSS滑動門（TABS），豎向排列的選項卡，比較漂亮，要用到3個圖片，點擊運行可以看到效果，圖片請自行下載。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>模仿微軟CSS滑動門</title><style type="text/css">body{margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px}p{padding:0; margin:0; line-height:1.5em}#wrap{border:1px solid #A2A7AB; margin:20px auto; padding:8px; text-align:left; width:500px; background:url(/jscss/demoimg/200903/wrap11.jpg)}#menu{float:left; width:22%; background:url(/jscss/demoimg/200903/menu11.jpg) no-repeat right center}#menu ul{list-style:none; margin:0; padding:0}#menu li{height:25px; line-height:25px; text-align:right}#menu a{color:#000; text-decoration:none; display:block; padding-right:25px}#menu a:hover,#menu .on a{background:url(/jscss/demoimg/200903/over11.jpg) no-repeat right center; color:#039}#content{float:right; width:70%}#content h1{font-size:16px; font-weight:normal; margin:0; padding:0; margin-bottom:8px}#content ul{list-style:none; margin:0; padding:0}#content li{padding:3px}#copy{clear:both}</style><script type="text/javascript"></script></head><body><div   class="70qarhlowxag"   id="wrap"><div   class="70qarhlowxag"   id="menu"><ul><li id="m1" class="on">Indexs</li><li id="m2">Services</li><li id="m3">Codes</li><li id="m4">Windows</li><li id="m5">Offices</li></ul></div><div   class="70qarhlowxag"   id="content"><div   class="70qarhlowxag"   id="c1"><h1>Indexs</h1><ul> <li>Ajax無刷新評論（ASP.net+Jquery）</li><li>VB仿Vista風格真彩色圖標按鈕控件</li><li>PHP 生成HTML靜態列表分頁實例</li><li>乘風ASP多用戶計數器Access版 v3.93</li></ul></div><div   class="70qarhlowxag"   id="c2" style="display:none"><h1>Services</h1><ul><li>QvodCMS視頻點播專家 ASP v1.8</li><li>ZenPhoto PHP圖庫系統 v1.2.1</li><li>MyPic 七夜圖片管理系統PHP版 v2.0</li><li>Angel Upload PHP多文件上傳與下載程序</li></ul></div><div   class="70qarhlowxag"   id="c3" style="display:none"><h1>Codes</h1><ul><li>VB版網頁照相機（抓取網頁并保存為BMP）</li><li>將圖片地址加入文本框的PHP文件上傳程序</li><li>Mini File Host PHP上傳程序 v1.5 中文版</li><li>復活小說站（終點小說系統內核）ASP版</li></ul></div><div   class="70qarhlowxag"   id="c4" style="display:none"><h1>Windows</h1><ul><li>VB讀寫PNG并處理為透明背景物操作示例</li><li>經典游戲下載：瘋狂對對碰J2ME源碼版</li><li>VB支持中文的平滑字體滾動特效</li><li>給VB6編輯器添加鼠標滾輪的功能</li></ul></div><div   class="70qarhlowxag"   id="c5" style="display:none"><h1>Offices</h1><ul><li>支持斷點續傳帶進度條的VB下載控件</li><li>《代碼大全》中文第一、二版（PDF）</li><li>VB根據數字報語音的程序</li><li>《數據庫系統概念》電子版 (PDF)</li></ul></div></div><div   class="70qarhlowxag"   id="copy"><p>? 2009 Design by Microsoft Inc</p></div></div></body></html>

上一篇：帶陰影的CSS菜單

下一篇：CSS導航條，淺綠色