html 侧边栏 tab,侧边栏，tab切换

* {

margin:0;

padding:0;

list-style:none;

}

body {

font-size:12px;

color:#666;

text-align:left;

}

h1 {

text-align:center;

}

.bag {

background:red;

}

.panal {

width:490px;

height:520px;

background:#f0f0f0;

float:right;

display:none;

}

.panal .tab {

overflow:hidden;

background:gainsboro;

}

.panal .tab a {

display:block;

padding:10px 20px;

float:left;

text-decoration:none;

color:#333;

}

.panal .tab a:hover {

background:gray;

color:#fff;

text-decoration:none;

}

.panal .tab a.on {

background:gray;

text-decoration:none;

color:white;

}

.panal .content {

overflow:hidden;

padding:10px;

}

.panal .content li {

display:none;

}

/*arcile*/

.comma {

background:#f2f2f2;

margin-top:50px;

}

.arcile {

width:220px;

height:500px;

background:gainsboro;

float:left;

text-align:center;

padding:10px 0;

}

.info-ul>ul li {

list-style:none;

line-height:20px;

float:left;

margin:10px 0 0 15%;

}

.info-img {

width:50%;

padding:5px;

background:white;

margin:22%;

}

.info-meu>ul li a {

text-decoration:none;

line-height:30px;

width:100%;

color:black;

}

.info-meu>ul li a:hover {

color:blue;

}