网页布局+下拉隐藏栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*
{
margin:0px;
padding:0px;}
#a
{
width:100%;
height:80px;
position:relative;
border:1px solid red;
}
#logo
{
width:20%;
height:60px;
position:relative;
border:1px solid blue;
margin-top:10px;
margin-left:10%;}
#daohang
{
width:50%;
height:30px;
border:1px solid yellow;
position:relative;
left:40%;
top:-31px;}
.aa
{
width:17%;
height:24px;
background-color:#3F6;
position:relative;
float:left;
margin-left:2.5%;
margin-top:3px;
overflow:hidden;
transition:1s;
}
.aa:hover
{
background-color:#C0C;
overflow:visible;}
.bb
{
width:100%;
height:144px;
background-color:#3FC;
position:relative;
top:24px;
z-index:2;
box-shadow:#666 5px 5px 5px;}
#chaoda
{
width:80%;
height:1500px;
position:relative;
border:1px solid yellow;
left:10%;
margin-top:10px;}
#yihang1
{
width:29%;
height:300px;
border:1px solid gray;
position:relative;
left:3.25%;
top:10px;
}
#yihang2
{
width:29%;
height:300px;
border:1px solid green;
position:absolute;
left:35.5%;
top:10px;
}
#yihang3
{
width:29%;
height:300px;
border:1px solid black;
position:absolute;
left:67.75%;
top:10px;
}
#erhang1
{
width:43%;
height:200px;
border:1px solid orange;
position:relative;
margin-top:20px;
left:3.25%;}
#erhang2
{
width:47.25%;
height:200px;
border:1px solid red;
position:absolute;
margin-top:-202px;
left:49.6%;}
</style>
</head>
<body>
<div id="a">
<div id="logo"></div>
<div id="daohang">
<div class="aa">
<div class="bb"></div>
</div>
<div class="aa"><div class="bb"></div></div>
<div class="aa"><div class="bb"></div></div>
<div class="aa"><div class="bb"></div></div>
<div class="aa"><div class="bb"></div></div>
</div>
</div>
<div id="chaoda">
<div id="yihang1"></div>
<div id="yihang2"></div>
<div id="yihang3"></div>
<div id="erhang1"></div>
<div id="erhang2"></div>
</div>
</body>
</html>
