合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

视觉效果的网页选项卡

2011-08-09 09:40:41建站知识

“选项卡”经常会被混同为“滑动门”,滑动门只是一种背景自适应内容的实现方法,不只可以应用在导航菜单,一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

“选项卡”一般和JavaScirpt及Ajax结合使用,以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合,完成切换的效果。GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html xmlns="http://www.w3.org/1999/xhtml">GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<head>GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<title>选项卡</title>GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<style type="text/css">GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<!--GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/* 初始化 */GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
body {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font: 12px/1 "宋体", SimSun, serif;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background:#fff;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#000;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
ul,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
li,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
dl,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
dt,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
dd {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:0;  /* 清除浏览器默认的margin和padding值 */GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
ul,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
li {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
list-style:none outside;  /* 清除浏览器中列表项默认的占位 */GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-decoration:none;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
img {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border:0;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/* 选项卡整体外观定义 */GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:400px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:160px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
overflow:hidden;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabBox {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:100%;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:relative;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background:#09c;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabBox li {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
float:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:25%;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align:center;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList h4 {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:26px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-size:1em;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
line-height:22px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList h4 a {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#039;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-weight:normal;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background:#bfeafd url(http://www.webjx.com/files/090217/1_222040.png) no-repeat;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding-left:5px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList h4 a span {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat top right;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding-right:5px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList h4 a:hover,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabOn h4 a{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background-position:0 -50px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList h4 a:hover span,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabOn h4 a span {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background-position:right -50px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox li{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:auto;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin-top:0;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:390px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:130px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border:1px solid #069;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
overflow:hidden;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background:#fff;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:absolute;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
top:22px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
left:0;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:none;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:4px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList li:hover .tabContentBox,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabOn .tabContentBox {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
/* 以下是对各项内容的CSS定义 */GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#999;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
line-height:2em;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:5px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dt,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dt,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dd,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dd{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
float:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border-bottom: 1px dotted #9cf;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dt,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dt {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:60%;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
white-space:nowrap;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
overflow:hidden;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
clear:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
font-size:1.1em;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dt a,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dt a {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#039;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin-left:5px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding-left:12px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background: url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dt a:hover,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dt a:hover {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#f90;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background-position:5px -19px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dd,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dd {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#0cf;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:20%;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
float:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
white-space:nowrap;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
overflow:hidden;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dd a,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dd a {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#069;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .blog dd a:hover,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .group dd a:hover {GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#f90;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .album li,GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.tabList .tabContentBox .share li{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:24.9%;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
float:left;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding-top:15px;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align:center;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
-->GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</style>GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<script type="text/javascript" language="javascript">GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<!--GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
window.onload = tabEffect;GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
function tabEffect()GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
var allElements = document.getElementsByTagName('*');GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
for (var i=0; i<allElements.length; i++)GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
if (allElements[i].className.indexOf('tabOption') >= 0)GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
{GUG合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
allElements[i].onmouseover = mouseOver;

本文关键词
视觉效果选项卡,合肥建站,合肥网页设计