較好的視覺效果的網頁選項卡
<!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>選項卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋體", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0; /* 清除瀏覽器默認的margin和padding值 */
}
ul,
li {
list-style:none outside; /* 清除瀏覽器中列表項默認的佔位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 選項卡總體外觀定義 */
.tabList {
width:400px;
height:160px;
overflow:hidden;
}
.tabList .tabBox {
height:100%;
position:relative;
background:#09c;
}
.tabList .tabBox li {
float:left;
width:25%;
text-align:center;
}
.tabList h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.tabList h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url(http://www.webjx.com/files/090217/1_222040.png) no-repeat;
padding-left:5px;
}
.tabList h4 a span {
display:block;
background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat top right;
padding-right:5px;
}
.tabList h4 a:hover,
.tabList .tabOn h4 a{
background-position:0 -50px;
}
.tabList h4 a:hover span,
.tabList .tabOn h4 a span {
background-position:right -50px;
}
.tabList .tabContentBox li{
width:auto;
margin-top:0;
}
.tabList .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.tabList li:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display:block;
}
/* 如下是對各項內容的CSS定義 */
.tabList .tabContentBox .blog,
.tabList .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt,
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.tabList .tabContentBox .blog dt a,
.tabList .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px;
}
.tabList .tabContentBox .blog dt a:hover,
.tabList .tabContentBox .group dt a:hover {
color:#f90;
background-position:5px -19px;
}
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd {
color:#0cf;
width:20%;
float:left;
white-space:nowrap;
overflow:hidden;
}
.tabList .tabContentBox .blog dd a,
.tabList .tabContentBox .group dd a {
color:#069;
}
.tabList .tabContentBox .blog dd a:hover,
.tabList .tabContentBox .group dd a:hover {
color:#f90;
}
.tabList .tabContentBox .album li,
.tabList .tabContentBox .share li{
width:24.9%;
float:left;
padding-top:15px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
window.onload = tabEffect;
function tabEffect()
{
var allElements = document.getElementsByTagName('*');
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf('tabOption') >= 0)
{
allElements[i].onmouseover = mouseOver;
}
}
}
function mouseOver()
{
tabList = this.parentNode;
tabOptions = tabList.getElementsByTagName("li");
for (var i=0; i<tabOptions.length; i++)
{
if (tabOptions[i].className.indexOf('tabOption') >= 0)
{
tabOptions[i].className = "tabOption";
}
}
this.className += " tabOn";
}
-->
</script>
</head>
<body>
<div class="tabList" id="tabList1">
<ul class="tabBox">
<li class="tabOption tabOn"><h4><a href="/blog/" title="單擊，跳轉到全部[日誌]列表"><span>日誌</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent blog">
<dt><a href="http://www.webjx.com/security/basexsrm-9739.html" title="手工殺毒的一些心得！">手工殺毒的一些心得！</a></dt>
<dd class="name"><a href="#11" title="">QUESTER</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="日誌標題：Photoshop 的真人動漫效果">Photoshop 的真人動漫效果</a></dt>
<dd class="name"><a href="#11" title="做者：snl">snl</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="日誌標題：網站內容結構化探討">網站內容結構化探討</a></dt>
<dd class="name"><a href="#11" title="做者：豆貓">豆貓</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webjx.com/photoshop/psmouse-9733.html" title="Photoshop製做一張舊的黑桃A撲克牌">Photoshop製做一張舊的黑桃A撲克牌</a></dt>
<dd class="name"><a href="#11" title="做者：greengnn">greengnn</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webjx.com/photoshop/" title="日誌標題：Photoshop CS3教程">Photoshop CS3教程</a></dt>
<dd class="name"><a href="#11" title="做者：amethyst01">amethyst01</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
<li class="tabOption"><h4><a href="/album/" title="單擊，跳轉到全部[相冊]列表"><span>相冊</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent album">
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li> </ul>
</div>
</li>
<li class="tabOption"><h4><a href="/share/" title="單擊，跳轉到全部[分享]列表"><span>分享</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent share">
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
</ul>
</div>
</li>
<li class="tabOption"><h4><a href="/group/" title="單擊，跳轉到全部[羣組]列表"><span>羣組</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent group">
<dt><a href="/1" title="標題：優秀廣告設計，不服不行！">優秀廣告設計，不服不行！</a></dt>
<dd class="name"><a href="#11" title="羣組：設計視覺">設計視覺</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="標題：Photoshop 的真人動漫效果">Photoshop 的真人動漫效果</a></dt>
<dd class="name"><a href="#11" title="羣組：手繪愛好者">手繪愛好者</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="標題：網站內容結構化探討">網站內容結構化探討</a></dt>
<dd class="name"><a href="#11" title="羣組：WEB標準化">WEB標準化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/4" title="標題：CSSzengarden的代碼裏還有什麼">CSSzengarden的代碼裏還有什麼</a></dt>
<dd class="name"><a href="#11" title="羣組：WEB標準化">WEB標準化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/5" title="標題：某些人眼中的色彩">某些人眼中的色彩</a></dt>
<dd class="name"><a href="#11" title="羣組：設計視覺">設計視覺</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>選項卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋體", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0; /* 清除瀏覽器默認的margin和padding值 */
}
ul,
li {
list-style:none outside; /* 清除瀏覽器中列表項默認的佔位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 選項卡總體外觀定義 */
.tabList {
width:400px;
height:160px;
overflow:hidden;
}
.tabList .tabBox {
height:100%;
position:relative;
background:#09c;
}
.tabList .tabBox li {
float:left;
width:25%;
text-align:center;
}
.tabList h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.tabList h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url(http://www.webjx.com/files/090217/1_222040.png) no-repeat;
padding-left:5px;
}
.tabList h4 a span {
display:block;
background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat top right;
padding-right:5px;
}
.tabList h4 a:hover,
.tabList .tabOn h4 a{
background-position:0 -50px;
}
.tabList h4 a:hover span,
.tabList .tabOn h4 a span {
background-position:right -50px;
}
.tabList .tabContentBox li{
width:auto;
margin-top:0;
}
.tabList .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.tabList li:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display:block;
}
/* 如下是對各項內容的CSS定義 */
.tabList .tabContentBox .blog,
.tabList .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt,
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.tabList .tabContentBox .blog dt a,
.tabList .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px;
}
.tabList .tabContentBox .blog dt a:hover,
.tabList .tabContentBox .group dt a:hover {
color:#f90;
background-position:5px -19px;
}
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd {
color:#0cf;
width:20%;
float:left;
white-space:nowrap;
overflow:hidden;
}
.tabList .tabContentBox .blog dd a,
.tabList .tabContentBox .group dd a {
color:#069;
}
.tabList .tabContentBox .blog dd a:hover,
.tabList .tabContentBox .group dd a:hover {
color:#f90;
}
.tabList .tabContentBox .album li,
.tabList .tabContentBox .share li{
width:24.9%;
float:left;
padding-top:15px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
window.onload = tabEffect;
function tabEffect()
{
var allElements = document.getElementsByTagName('*');
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf('tabOption') >= 0)
{
allElements[i].onmouseover = mouseOver;
}
}
}
function mouseOver()
{
tabList = this.parentNode;
tabOptions = tabList.getElementsByTagName("li");
for (var i=0; i<tabOptions.length; i++)
{
if (tabOptions[i].className.indexOf('tabOption') >= 0)
{
tabOptions[i].className = "tabOption";
}
}
this.className += " tabOn";
}
-->
</script>
</head>
<body>
<div class="tabList" id="tabList1">
<ul class="tabBox">
<li class="tabOption tabOn"><h4><a href="/blog/" title="單擊，跳轉到全部[日誌]列表"><span>日誌</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent blog">
<dt><a href="http://www.webjx.com/security/basexsrm-9739.html" title="手工殺毒的一些心得！">手工殺毒的一些心得！</a></dt>
<dd class="name"><a href="#11" title="">QUESTER</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="日誌標題：Photoshop 的真人動漫效果">Photoshop 的真人動漫效果</a></dt>
<dd class="name"><a href="#11" title="做者：snl">snl</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="日誌標題：網站內容結構化探討">網站內容結構化探討</a></dt>
<dd class="name"><a href="#11" title="做者：豆貓">豆貓</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webjx.com/photoshop/psmouse-9733.html" title="Photoshop製做一張舊的黑桃A撲克牌">Photoshop製做一張舊的黑桃A撲克牌</a></dt>
<dd class="name"><a href="#11" title="做者：greengnn">greengnn</a></dd>
<dd>2009-01-10</dd>
<dt><a href="http://www.webjx.com/photoshop/" title="日誌標題：Photoshop CS3教程">Photoshop CS3教程</a></dt>
<dd class="name"><a href="#11" title="做者：amethyst01">amethyst01</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
<li class="tabOption"><h4><a href="/album/" title="單擊，跳轉到全部[相冊]列表"><span>相冊</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent album">
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img1" title="查看相冊內容"><img src="http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li> </ul>
</div>
</li>
<li class="tabOption"><h4><a href="/share/" title="單擊，跳轉到全部[分享]列表"><span>分享</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent share">
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
<li><a href="/img2" title="查看內容"><img src="http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相冊的標題" /></a></li>
</ul>
</div>
</li>
<li class="tabOption"><h4><a href="/group/" title="單擊，跳轉到全部[羣組]列表"><span>羣組</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent group">
<dt><a href="/1" title="標題：優秀廣告設計，不服不行！">優秀廣告設計，不服不行！</a></dt>
<dd class="name"><a href="#11" title="羣組：設計視覺">設計視覺</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/2" title="標題：Photoshop 的真人動漫效果">Photoshop 的真人動漫效果</a></dt>
<dd class="name"><a href="#11" title="羣組：手繪愛好者">手繪愛好者</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/3" title="標題：網站內容結構化探討">網站內容結構化探討</a></dt>
<dd class="name"><a href="#11" title="羣組：WEB標準化">WEB標準化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/4" title="標題：CSSzengarden的代碼裏還有什麼">CSSzengarden的代碼裏還有什麼</a></dt>
<dd class="name"><a href="#11" title="羣組：WEB標準化">WEB標準化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="/5" title="標題：某些人眼中的色彩">某些人眼中的色彩</a></dt>
<dd class="name"><a href="#11" title="羣組：設計視覺">設計視覺</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>
相關文章
- 1. objective-c 選項卡翻頁效果
- 2. 網頁選項卡
- 3. 動態選項卡的效果
- 4. 簡單的選項卡切換效果
- 5. 簡單純js實現網頁tab選項卡切換效果
- 6. 原生javascript寫的網頁選項卡和jQuery寫的比較
- 7. 標籤頁插件（選項卡的效果實現）
- 8. CSS視覺效果
- 9. CoreAnimation 視覺效果
- 10. 簡單實用的網頁選項卡切換特效
- 更多相關文章...
- • ionic tab(選項卡) - ionic 教程
- • ionic 選項卡欄操作 - ionic 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. objective-c 選項卡翻頁效果
- 2. 網頁選項卡
- 3. 動態選項卡的效果
- 4. 簡單的選項卡切換效果
- 5. 簡單純js實現網頁tab選項卡切換效果
- 6. 原生javascript寫的網頁選項卡和jQuery寫的比較
- 7. 標籤頁插件（選項卡的效果實現）
- 8. CSS視覺效果
- 9. CoreAnimation 視覺效果
- 10. 簡單實用的網頁選項卡切換特效