Tab菜單
利用CSS隱藏或顯示欄目中的部分內容，實際Tab面板包含的全部內容都已下載到客戶端瀏覽器當中。一般Tab面板僅顯示一個Tab菜單項，當用戶點選對應的菜單選項之后，才會顯示對應的內容。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Tab菜單</title></head><style>*{margin: 0;padding: 0;}.Menubox ul{list-style: none;background-color: #000;height: 40px;line-height: 40px;}.Menubox ul li{display: inline-block;color: #fff;padding: 0 10px;font-size: 20px;}.Contentbox ul{width: 100%;height: 100px;background-color:#D7D4D4 ;}.Contentbox ul li{opacity: 0;position: absolute;}.Menubox ul li:hover{background-color: #969292;}</style><body><div id="tab"><div class="Menubox"><ul><li id="tab_1" onclick="setTab(1,4)">首頁</li><li id="tab_2" onclick="setTab(2,4)">學習</li><li id="tab_3" onclick="setTab(3,4)">完了</li><li id="tab_4" onclick="setTab(4,4)">玩樂</li></ul></div><div class="Contentbox"><ul><li id="con_1" ><span>12345</span></li><li id="con_2" ><span>678910</span></li><li id="con_3"><span>11121314</span></li><li id="con_4" ><span>151617181920</span></li></ul></div></div></body><script>function setTab(cursel,n){for(i=1;i<=n;i++){var menu=document.getElementById("tab_"+i);var con=document.getElementById("con_"+i);menu.className=i==cursel?"hover":"";con.style.opacity=i==cursel?"1":"0";}}</script>
</html>
下拉式菜單
當鼠標移動到菜單項目上時會自動彈出一個下拉的面板，在該面板中顯示各種分類信息，這叫做下拉式菜單，常用于電商網站
設計思路：在超鏈接內包含面板結構，當鼠標移過超鏈接時，自動顯示這個面板，默認情況下時隱藏的。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉菜單</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: #fff;}nav ul {background-color: #000;height: 40px;line-height: 40px;font-size: 20px;}nav ul li {display: inline-block;position: relative;}nav ul li:hover .tl {display: block;width: 80px;background-color: #D7D4D4;}nav ul li div {background-color: #D7D4D4;font-size: 10px;line-height: 12px;width: 150px;opacity: 0;}nav ul li:hover dl dt {font-size: 15px;line-height: 20px;}nav ul li div dl dd {padding-left: 20px;}nav ul li div dl dd a {color: #595555;text-decoration: underline;}nav ul li:hover div {opacity: 1;}</style></head><body><nav><ul id="list"><li><a href="#" class="tl">商品導購</a><div><dl><dt>產品大類</dt><dd><a href="#">圖書、音像、數字產品</a></dd><dd><a href="#">家用電器</a></dd><dd><a href="#">手機、數碼、京東通信預約</a></dd><dd><a href="#">電腦、辦公</a></dd><dd><a href="#">家居，家具、家裝、廚具</a></dd><dd><a href="#">服飾內衣、珠寶首飾</a></dd><dd><a href="#">個護化妝</a></dd><dd><a href="#">鞋靴、箱包、鐘表、奢侈品</a></dd><dd><a href="#">運動戶外</a></dd></dl></div></li></ul></nav></body>
</html>
![[C++核心編程-06]----C++類和對象之對象模型和this指針](http://pic.xiahunao.cn/[C++核心編程-06]----C++類和對象之對象模型和this指針)
