<!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">
.box{width:960px;margin:0?auto;padding:0;}
.box?.head{height:30px;background:#F30;}
.box?.mainbody{width:700px;height:600px;background:#FC3;text-align:center;font-size:30px;color:#FFF;}
.box?.left{width:460px;height:200px;background:#000;float:left;text-align:center;font-size:30px;color:#FFF;}
.box?.right{width:260px;height:600px;background:#6C6;;float:right;text-align:center;font-size:30px;color:#FFF;}
.box?.copyright{height:30px;background:#903;}
</style>
</head>
<body>
<div?class="box">
<div?class="head">head</div>
????<div?class="left">left</div>
????<div?class="right">right</div>
????<div?class="mainbody">mainbody</div>
????<div?class="copyright">copyright</div>
????
????
</body>
</html>
2016-03-10
自己還大意了，沒有把box這個div加閉合標簽。
2016-03-09
除了在.right的樣式中增肌text-align:center;，再增加line-height:200px;
.right和mainbody一樣操作即可
2016-03-09
你在body、left、right三個CSS里面寫了：text-align:center這一句話。表示它們里面的內容居中顯示
2016-03-09
讓mainbody自動適應，把它看做一個大背景就可以，不必加長寬。
你的這些顏色塊排列樣式是靠float完成的。
而text-align，顧名思義，text——文本；align——排列成線。你的text-align：center 成為了文本居中。
字號是你自己加的吧。
一點看法，聊供參考
2016-03-09
在某一行居中用div{text-align:center;}