選項(xiàng)卡原身是Windows操作系統(tǒng)的一個(gè)創(chuàng)意，即通過交換選項(xiàng)，讓很多項(xiàng)目信息輪替顯示在大小和位置都固定的小塊區(qū)域里。因此選項(xiàng)卡具有占用篇幅小，輻射內(nèi)容大的特點(diǎn)。一個(gè)典型的例子是你打開IE瀏覽器，依次點(diǎn)擊“工具”-“Internet選項(xiàng)”，這個(gè)表單就是一個(gè)選項(xiàng)卡典型布局。當(dāng)然了，這里所說的選項(xiàng)卡效果是要在Web頁面實(shí)現(xiàn)的，并非應(yīng)用程序里的菜單選項(xiàng)，在網(wǎng)頁中應(yīng)用選項(xiàng)卡可以使網(wǎng)頁顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。本文主要介紹一種簡潔的選項(xiàng)卡效果的實(shí)現(xiàn)，兼容性較好，方便大家直接使用。

以下是引用片段：
<style type="text/css">
body {
 margin:0px;
 text-align:center;
 font-size:12px;
}
#divall {
 margin:auto;
 margin-top:35px;
 width:300px;
 height:200px;
 background-color:#7DA7D9;
 border:0px;
}
#title {
 width:300px;
 height:20px;
 font-size:14px;
 margin-top:4px;
}
#table1 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#table2 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
 margin:auto;
 height:110px;
 width:290px;
 background-color:#eee;
 position:relative;
}
#content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {
 position:absolute;
 bottom:3px;
 right:3px; 

網(wǎng)頁名稱：網(wǎng)頁制作中分類的選項(xiàng)卡特效代碼
當(dāng)前鏈接：http://www.rwnh.cn/news0/168150.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、移動網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、小程序開發(fā)、ChatGPT、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)