9-3
完成佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
margin: 0;/*設定邊界為0*/
}
.container{
width: 100%;/* 設定寬度為 100% */
height: 950px;/* 設定高度為 950px */
background-color: #F5EDED;/* 設定背景顏色為 #F5EDED 在sublime 「ctrl+shift+c」或者在chrome #000000*/
}
.head{
width: 100%;
height:250px;
background-color: #000000;
color:#ffffff;/*設定文字顏色為 #ffffff*/
}
.content_menu{
width: 30%;
height:650px;
background-color: #66DAF2;
float:left;/* 設定向左浮動*/
}
.content_body{
width: 70%;
height:650px;
background-color: #8FF594;
float:right;/* 設定向右浮動*/
}
.foot{
clear:both;/*清除浮動*/
width: 100%;
height:100px;
background-color: #000000;
color:#ffffff;
}
</style>
<title>div佈局</title>
</head>
<body>
<div class="container">
<div class="head">頭部</div>
<div class="content">
<div class="content_menu">選單</div>
<div class="content_body">主內容</div>
</div>
<div class="foot">腳部</div>
</div>
</body>
</html>
9-2 設定背景