html tab页设计,HTML tab页 实现

首先定义框架

两个h3 是tab页点击按钮  最后是把这两个按钮放到一个div里

div1和div2 分别对应两个按钮点击 显示的内容

定义前台框架

Div1

Div2

javascript   控制点击事件

css 定义样式

#tab { position:relative; }

html > body #tab { width:100%; }

#tab .block { display:block; }

#tab div h3 //默认

{

float: left;

width: 114px;

height: 26px;

font-size: 12px;

cursor: pointer;

text-align: center;

color: #0099CC;

display: inline;

overflow: hidden;

position: absolute;

background: #FFFFFF url('../images/{1FA9C586-A8E0-48FA-A49B-392F4A5F49E5}.png') no-repeat;

vertical-align: 5%;

}

#tab .up //选中

{

background-position: center center;

background: #fff url('../images/{E627EE5E-0042-40B9-A959-196F3B34868D}.png') no-repeat;

width: 114px;

float: inherit;

display:inline;

overflow:hidden;

position:absolute;

}

.div_top

{

top: 30px;

} 注意：两个h3 最好是绝对定位(如果你不想在自己的机子上正确显示的在别人的机上显示就是错位的话)曾经因为这个问题调了一天半的程序