我自己做了一个很简单的布局,其中有几处问题。有可运行代码,请指教!!
我是初学布局的新手,今天做了一个布局,可是为什么中间的span部分都变成隐藏的了?
这三个span应该是中间平行的三列。可是现在都显示不出来
<span class= "c3 " id= "searchspan "> </span>
<span class= "c4 " id= "centerspan "> </span>
<span class= "c5 " id= "loginspan "> </span>
求解!
代码如下:
<!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=gb2312 " />
<title> xxxx </title>
<style type= "text/css ">
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
.blank2{ height:2px; clear:both; font-size:1px;overflow:hidden;}
.blank3{ height:3px; clear:both; font-size:1px;overflow:hidden;}
.blank5{height:6px; font-size:1px; clear:both;overflow:hidden;}
.blank9{ height:9px; font-size:1px; clear:both;overflow:hidden;}
.logobar {
margin:0 auto;
width: 760px;
height: 80px;
}
.navigate {
margin:0 auto;
width:760px;
height:40px;
}
.adbar {
margin:0 auto;
width:760px;
height:70px;
}
.mainbody {
margin:0 auto;
width:760px;
height:600px;
}
#searchspan {
width:160px;
height:200px;
}
#centerspan {
margin:1px 1px
width:500px;
height:200px;
}
#loginspan {
width: 190px;
height: 200px;
}
#usershow {
width: 100%;
height: 300px;
}
#userlist {
width: 380%;
height: 100px;
}
#articlelist {
margin: 2px;
width: 380px;
height: 100px;
}
.footer {
margin:0 auto;
width: 760px;
height: 100px;
}
.c0 {
background:red;
}
.c1 {
background:orange;
}
.c2 {
background:#F0B6A8;
}
.c3 {
background:#F4F6E8;
}
.c4 {
background:#B8A8F1;
}
.c5 {
background:#D6E296;
}
.c6 {
background:#C3D4CE;
}
</style>
</head>
<body>
<div class= "logobar c1 ">
</div>
<div class= "blank3 c0 ">
</div>
<div class= "navigate c2 ">
</div>
<div class= "blank3 c0 ">
</div>