步驟2│框架設定

{
width:957px;/*整體最外層 - 寬度*/
margin:0 auto;/*整體最外層 - 外距依序為 上下0，左右自動*/
}

{
width:957px;/*頭部最外層 - 寬度*/
height:213px;/*頭部最外層 - 高度*/
background:url(graphics/header.jpg) no-repeat top left;
/*頭部最外層 - 背景設定依序為 圖片位置 / 重複是否 / 水平位置 / 垂直位置*/
float:left;/*頭部最外層 - 浮動靠左*/
}

{
position:absolute; /*歡迎詞 - 絕對位置設定*/
top:130px; /*歡迎詞 - 距離上方高度設定*/
padding:25px; /*歡迎詞 - 內距*/
color:#333; /*歡迎詞 - 文字顏色*/
text-align:left; /*歡迎詞 - 文字齊左*/
width:850px; /*歡迎詞 - 寬度*/
height:30px; /*歡迎詞 - 高度*/
font-size:15px; /*歡迎詞 - 文字大小*/
}

{
margin-top:54px;/*中間最外層 - 上方外距*/
width:957px;/*中間最外層 - 寬度*/
float:left;/*中間最外層 - 浮動靠左*/
background:#d8edf4 url(graphics/bk2.jpg) no-repeat top left;
/*中間最外層 - 背景設定依序為 背景色 / 圖片位置 / 重複是否 / 水平位置 / 垂直位置*/
}

{
width:957px;/*中間外層 - 寬度*/
float:left;/*中間外層 - 浮動靠左*/
}

{
width:957px;/*底部外層 - 寬度*/
padding-top:15px;/*底部外層 - 上方內距*/
height:50px;/*底部外層 - 高度*/
background:#fff;/*底部外層 - 背景色*/
float:left;/*底部外層 - 浮動靠左*/
}

{
color:#16c2fb;/*版權宣告 - 文字顏色*/
font-size:10px;/*版權宣告 - 文字大小*/
text-align:right;/*版權宣告 - 文字齊右*/
}

{
color:#008fbe;/*版權宣告連結 - 文字顏色*/
font-size:10px;/*版權宣告連結 - 文字大小*/
}