<!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?type="text/css">
*{margin:0;?padding:0;?font-size:12px;?list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a?img{border:none;}
body{background:#efefec;}
#top{width:100%;?
overflow:hidden;
border-bottom:1px?solid?#dadad9;
background:#fff;?
float:left;?
position:fixed;?
top:0;
left:0;
text-align:center;}
#top?input{border:none;}
.left{float:left;?margin-left:10px;}
.search{float:left;?margin-left:10px;?margin-top:7px;}
.select_btn{background:url(images/select_top.gif)?no-repeat;?width:57px;?height:42px;?cursor:pointer;?float:left;}
.search_input{background:url(images/input_search.gif)?no-repeat;?width:104px;?height:28px;?float:left;?padding-left:5px;}
.search_btn{background:url(images/search_btn.gif)?no-repeat;?width:29px;?height:28px;?float:left;}
.right{float:right;?margin-right:10px;?padding:5px?10px?0;?border-left:1px?solid?#f5f5f5;?border-right:1px?solid?#f5f5f5;?height:37px;}
.topbtn{background:url(images/top_btn.gif)?no-repeat;?width:54px;?height:30px;?line-height:30px;?color:#444;}
.margin_l_10{margin-left:10px;}
.margin_t_5{margin-top:5px;}
.center{margin:0?15px;}
.center_r{margin-right:15px;}
#mainbody{width:80%;?
overflow:hidden;?
margin:63px?auto?0;
}
.content{width:236px;?border:1px?solid?#dcdcda;?float:left;}
.content?li{margin-bottom:15px;?text-align:center;}
.content?li?h2{text-align:left;?padding:12px?15px;?font-weight:normal;?color:#444;?background:#fff;?margin-top:-3px;?background:#fafafa;}
.content?li?dl{border-top:1px?solid?#f2f2f2;?text-align:left;}
.content?li?dt{padding:15px;?float:left;?border-right:1px?solid?#f2f2f2;}
.content?li?dd{padding-top:18px;?text-indent:15px;}
.content?li?dd?a{color:#9e7e6b;}
#footer{width:100%;?background:#fff;?text-align:center;?padding:20px?0;?color:#999;?border-top:#ccc;?margin-top:20px;}
</style>
</head>
<body>
<div?id="top">
??<div?class="left">
????<div?class="select_btn"></div>
????<div?class="search">
??????<input?type="text"?class="search_input"?/>
??????<input?type="button"?class="search_btn"?/>
????</div>
??</div>
??<a?href="#"?class="margin_t_5"><img?src="images/logo.gif"?width="80"?height="35"?/></a>
<div?class="right">
????<input?type="button"?value="登錄"?class="topbtn"?/>
????<input?type="button"?value="注冊(cè)"?class="topbtn?margin_l_10"?/>
??</div>
</div>
<div?id="mainbody">
??<div?class="content">
????<ul>
??????<li><img?src="images/img_03.jpg"?width="204"?height="331"?/>
????????<h2>人潮</h2>
????????<dl>
??????????<dt><img?src="images/head_03.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">霹靂紅唇</a>?采集到?<a?href="#">時(shí)光</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_04.jpg"?width="236"?height="303"?/>
????????<h2>熊熊與蘑菇女</h2>
????????<dl>
??????????<dt><img?src="images/head_02.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">白雪公主</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_08.jpg"?width="236"?height="333"?/>
????????<h2>幻化</h2>
????????<dl>
??????????<dt><img?src="images/head_01.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">流浪貓</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
????</ul>
??</div>
??<div?class="content?center">
???????<ul>
??????<li><img?src="images/img_05.jpg"?width="236"?height="342"?/>
????????<h2>桃花滿枝</h2>
????????<dl>
??????????<dt><img?src="images/head_02.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">白雪公主</a>?采集到?<a?href="#">淡彩</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_02.jpg"?width="236"?height="243"?/>
????????<h2>小矮人</h2>
????????<dl>
??????????<dt><img?src="images/head_04.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">小p孩</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_07.jpg"?width="236"?height="330"?/>
????????<h2>古代美女</h2>
????????<dl>
??????????<dt><img?src="images/head_04.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">小p孩</a>?采集到?<a?href="#">傾國(guó)傾城</a></dd>
????????</dl>
??????</li>
????</ul>
??</div>
??<div?class="content?center_r">
???????<ul>
??????<li><img?src="images/img_06.jpg"?width="236"?height="373"?/>
????????<h2>阿貍愛</h2>
????????<dl>
??????????<dt><img?src="images/head_02.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">白雪公主</a>?采集到?<a?href="#">愛漫</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_08.jpg"?width="236"?height="333"?/>
????????<h2>幻化</h2>
????????<dl>
??????????<dt><img?src="images/head_01.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">流浪貓</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_04.jpg"?width="236"?height="303"?/>
????????<h2>熊熊與蘑菇女</h2>
????????<dl>
??????????<dt><img?src="images/head_02.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">白雪公主</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
????</ul>
??</div>
??<div?class="content">
???????<ul>
??????<li><img?src="images/img_07.jpg"?width="236"?height="330"?/>
????????<h2>古代美女</h2>
????????<dl>
??????????<dt><img?src="images/head_04.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">小p孩</a>?采集到?<a?href="#">傾國(guó)傾城</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_01.jpg"?width="236"?height="416"?/>
????????<h2>Queen&Princess</h2>
????????<dl>
??????????<dt><img?src="images/head_02.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">白雪公主</a>?采集到?<a?href="#">漫漫畫語(yǔ)</a></dd>
????????</dl>
??????</li>
??????<li><img?src="images/img_03.jpg"?width="204"?height="331"?/>
????????<h2>人潮</h2>
????????<dl>
??????????<dt><img?src="images/head_03.jpg"?width="34"?height="34"?/></dt>
??????????<dd><a?href="#">霹靂紅唇</a>?采集到?<a?href="#">時(shí)光</a></dd>
????????</dl>
??????</li>
????</ul>
??</div>
</div>
<div?id="footer">慕課@版權(quán)所有</div>
</body>
</html>
2015-11-22
對(duì)的,overflow:hidden可以達(dá)到清除浮動(dòng)的效果 ??http://sentsin.com/web/529.html
2015-12-24
.select_btn{background:url(images/select_top.gif)?no-repeat;?width:57px;?height:42px;?cursor:pointer;?float:left;}
應(yīng)該是這行得出top的背景圖片為42px高 所以mainbody就margin:62px auto 0