/* CSS样式制作 */
* {
padding:0px;
margin:0px;
}
a {
text-decoration:none;
color:black;
}
a:hover {
text-decoration:none;
color:#336699;
}
#tab {
width:270px;
padding:5px;
height:150px;
margin:20px;
}
#tab ul {
list-style:none;
display:;
height:30px;
line-height:30px;
border-bottom:2px #C88 solid;
}
#tab ul li {
background:#FFF;
cursor:pointer;
float:left;
list-style:none height:29px;
line-height:29px;
padding:0px 10px;
margin:0px 10px;
border:1px solid #BBB;
border-bottom:2px solid #C88;
}
#tab ul li.on {
border-top:2px solid gray;
border-bottom:2px solid #FFF;
}
#tab div {
height:100px;
width:250px;
line-height:24px;
border-top:none;
padding:1px;
border:1px solid #336699;
padding:10px;
}
.hide {
display:none;
}
先分析基本思路。首先编写HTML,然后再加载样式,最后用JS修改相应的DOM,达到更改选项卡和内容的目的。HTML显示的是所有与文字有关的信息