文本（如left，right）怎么設置的和效果圖一樣？

怎么把字體都搞得和樣本一樣？

寧靜致遠_擇善固執

2015-12-29

源自：網頁布局基礎 3-5

關注問題我要回答

785

操作

收起

3 回答

手持銹劍的少年變成山丘回答被采納 +3 積分
2015-12-29

<!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;
}
#wrap {
?? ?background:#00C;
?? ?margin:0 auto;
?? ?width:960px;
}
#header {
?? ?background:#FF3300;
?? ?width:100%;
}
#mainbody {
?? ?background:#FC0;
??? width:100%;
??? overflow:hidden;
}
.left {
?? ?width:800px;
?? ?height:200px;
?? ?background:#000;
??? float:left;
??? font-size:20px;
??? color:#fff;
??? text-align:center;
??? line-height:200px;
}
.right {
??? width:140px;
??? height:500px;
??? background:#690;
??? float:right;
??? font-size:20px;
??? color:#fff;
??? text-align:center;
??? line-height:500px;
}
#mainbody p{
??? font-size:20px;
??? color:#fff;
??? text-align:center;
??? line-height:200px;
}
#footer {
?? ?background:#639;
?? ?width:100%;
}
</style>
</head>

<body>
<div id="wrap">
? <div id="header">頭部</div>
? <div id="mainbody">
??? <div class="left">left</div>
??? <div class="right">right</div>
??? <p>mainbody</p>
? </div>
? <div id="footer">版權部分</div>
</div>
</body>
</html>