div+css教程_DIV+CSS实现网页布局实例代码(2)_div+css教程(2)_H5之家

#footer {
width:800px;
height:100px;
background:red;
margin:auto 0px;
padding-top: 30px;
color: #ffffff;
}
#footer a:link, #footer a:visited,{
    text-decoration:none;
    color: #ffffff;
}
#footer a:hover{
    text-decoration:underline;
    color: #ffffff;
}

.tab1 h3{
float:left;
width:300px;
height:20px;
line-height:20px;
margin:0px;
font-size:13px;
text-align:left;
color:red;
background:green;
padding-left:10px;
}

.tab2{
          width:300px;
          height:180px;

         background:yellow;

}

.tab2 ul {
margin: 4px 0 0;
list-style:none;
padding:0;
}

.tab2 li
{
float:left;
width:50%;
}

.tab2 li a {
display:block;
width:84%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#333;

}

#tab {
float:left;
margin:0px;
width:600px;
height:260px;
position:relative;
background:green;
}

#tab h3{
float:left;
width:120px;
height:26px;

line-height:26px;
margin:0 -1px 0 0 ;
font-size:12px;
cursor:pointer;
text-align:center;
color:#ff00ff;
background:#aacc33;
}

#tab div {
display:none;
}

#tab .block {

display:block;
}

#tab .up {

background:blue;
}
#tab div {
              float:left;
              top:26px;
              left:0px;
              width:600px;
              height:230px;
             border:solid #eee;
             border-width:0 1px 1px;
             background:#0f0f0f;
}

#tab ul{
float:left;
margin:15px 0 0;
list-style:decimal;
padding:0;
clear:right;
}

#tab li {
float:left;
width:50%;
background:#123456;
}
#tab li a{
display:block;
width:90%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#ffffff;
}

#tab li a:hover {
text-decoration:underline;
color:red;

}

//-->
</style>
</head>