自然與生活科技

body {
margin: auto; /*緊貼頂部(上下左右)，沒有空隙*/
background-color:#212663; /*背景色設定*/
}


/*--------------- 定義上幅樣式 -------------*/
#wrapper-top {
width: 950px; /*寬度設定為900px*/
margin:0 auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #3366CC; /*文字顏色設定*/
border: 2px solid #CC0000; /*網頁做外框的設定*/
background-image: url(images/Taiping.png);
background-repeat: no-repeat;
}


/*--------------- 定義下幅(上半部)樣式 -------------*/
#wrapper-main {
width: 950px; /*寬度設定為900px*/
margin:0 auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
border: 2px solid #3366cc; /*網頁做外框的設定*/
}


#top-header{
background-color:#069;
height: 112px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/
padding:20px; /*內距設定*/
font-size:32px; /*字體大小*/
color:#FFFFFF; /*字體顏色*/
border: 2px solid #3366cc; /*網頁做外框的設定*/
background-image: url(images/Taiping.png);
background-repeat: no-repeat;

}
/*--------------- 定義下幅(下半部)樣式 -------------*/
#content {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#339999; /*---深綠色---背景色設定*/
font-size: 15px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#CCCCCC; /*---灰色---文字顏色設定*/
padding: 5px; /*文字與#content間的內距*/
border: 2px solid #3366cc; /*網頁做外框的設定*/
}

#footer {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h2{
font-size:20px;
color:#FFF;
}


h3{
font-size:18px;
color:#FFF;
}

h4{
font-size:14px;
color:#999999;
}

.floatleft{
float:left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0px;
}

<link rel="stylesheet" href="style.css" media="screen" />

<div id="wrapper-main">

<div id="content">

</ div>
</ div>