主體部分不能居中
<!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>綠蘿網(wǎng)首頁</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;}
a{text-decoration:none;}
a img{border:none;}
ul{list-style:none;}
a:hover{text-decoration:underline;}
#head{width:100%; overflow:hidden;border-top:1px solid pink;border-bottom:1px solid pink;background:#FFF; float:left;top:0;position:fixed; top:10px; left:0;text-align:center;}
.left{float:left;margin-top:5px;margin-left:25px;border-left:1px solid #f5f5f5;border-right:1px solid #f5f5f5;height:37px;}
.serch{float:left;margin-left:10px;margin-top:5px;}
.select_btn{background:url(photo/select_top.gif) no-repeat;width:57px;height:42px;float:left;padding-left:5px;sursor:pointer;}
.logophoto{margin-top:-3px;}
.serch_input{background:url(photo/input_search.gif) no-repeat; width:104px; height:28px; float:left;padding-left:5px;margin-top:-3px;}
.serch_btn{background:url(photo/search_btn.gif)no-repeat;;width:29px;height:30px;float:left;margin-top:-3px;}
.right{float:right;margin-right:10px;padding:5px 10px 0;border-left:1px solid #f5f5f5;border-right:1px solid #f5f5f5;height:37px;}
.loginbtn{background:url(photo/top_btn.gif);no-repeat;width:54px;height:30px;line-height:30px;color:#444;}
.regitbtn{margin-left:10px;}
.mainbody{width:80%;overflow:hidden;margin:0 auto;margin-top:64px;}
.content{width:236px;border:1px solid pink;float:left;}
.center{margin:0 15px;}
.center_r{margin-right:15px;}
.coetent li{width:300;height:350;margin-bottom:15px;text-align:center;}
.listyle{width:230px;height:350px;border:pink dotted 1px;}
.content li h2{text-align:center;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:pink;text-align:center;padding:20px 0;color:#999;border-top:#ccc;margin-top:20px;}
</style>
</head>
<body>
? ? <div id="head">
? ? <div class="left">
? ? ? ? <div class="select_btn"></div>
? ? ? ? <div class="serch">
? ? ? ? <input type="text" class="serch_input" />
? ? ? ? <input type="button" class="serch_btn" />
? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <a href="#" ?class="logophoto"><img src="photo/logo.gif" width="80" height="35"/></a>
? ? ? ? <div class="right">
? ? ? ? <input type="button" value="登錄" class="loginbtn" />
? ? ? ? <input type="button" value="注冊" class="loginbtn regitbtn" />
? ? ? ? </div>
? ? </div>
? ? <div class="mainbody">
? ? <div class="content">
? ? ? ? <ul>
? ? ? ? ? ? <li><img src="photo/img_03.jpg" width="204" height="331" />
? ? ? ? ? ? <h2>人潮</h2>
? ? ? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? <dt><img src="photo/head_01.jpg" width="34" height="34" /></dt>
? ? ? ? ? ? ? ? ? ? <dd><a href="#">霹靂紅唇</a>采集到<a href="#">時(shí)光</a></dd>
? ? ? ? ? ? ? ? </dl>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li class="listyle"><img src="photo/img_04.jpg" width="236" height="303" />
? ? ? ? ? ? ? ?<h2>熊熊與蘑菇女</h2>
? ? ? ? <dl>
? ? ? ? ? <dt><img src="photo/head_02.jpg" width="34" height="34" /></dt>
? ? ? ? ? <dd><a href="#">白雪公主</a> 采集到 <a href="#">漫漫畫語</a></dd>
? ? ? ? </dl>
? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="content center">
? ? ? ? <ul>
? ? ? <li><img src="photo/img_05.jpg" width="236" height="342" />
? ? ? ? <h2>桃花滿枝</h2>
? ? ? ? <dl>
? ? ? ? ? <dt><img src="photo/head_02.jpg" width="34" height="34" /></dt>
? ? ? ? ? <dd><a href="#">白雪公主</a> 采集到 <a href="#">淡彩</a></dd>
? ? ? ? </dl>
? ? ? </li>
? ? ? <li><img src="photo/img_02.jpg" width="236" height="243" />
? ? ? ? <h2>小矮人</h2>
? ? ? ? <dl>
? ? ? ? ? <dt><img src="photo/head_04.jpg" width="34" height="34" /></dt>
? ? ? ? ? <dd><a href="#">小p孩</a> 采集到 <a href="#">漫漫畫語</a></dd>
? ? ? ? </dl>
? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="content center_r">
? ? ? ? <ul>
? ? ? <li><img src="photo/img_05.jpg" width="236" height="342" />
? ? ? ? <h2>桃花滿枝</h2>
? ? ? ? <dl>
? ? ? ? ? <dt><img src="photo/head_02.jpg" width="34" height="34" /></dt>
? ? ? ? ? <dd><a href="#">白雪公主</a> 采集到 <a href="#">淡彩</a></dd>
? ? ? ? </dl>
? ? ? </li>
? ? ? <li><img src="photo/img_02.jpg" width="236" height="243" />
? ? ? ? <h2>小矮人</h2>
? ? ? ? <dl>
? ? ? ? ? <dt><img src="photo/head_04.jpg" width="34" height="34" /></dt>
? ? ? ? ? <dd><a href="#">小p孩</a> 采集到 <a href="#">漫漫畫語</a></dd>
? ? ? ? </dl>
? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
? ? <div id="footer">我制作的一個(gè)網(wǎng)頁</div>
</body>
</html>
2016-03-21
margin:0 auto; ?mainbody已經(jīng)設(shè)置了居中啊
2016-03-19
主體不居中，mainbody