將平淡無變化的網頁晉陞為各式多樣的網頁

 

只要以下七行CSS就可以讓網頁從(圖一)的文字網頁變成(圖二)的漂亮網站。

body
{
 background:#aaa99e; color:#787878;
}
#artboard
{
 width:850px;
}
#header
{
 width:850px;
 height:300px;
 background:url(graphics/head.jpg) no-repeat top center;
 float:left;
}
#content
{
 width:850px;
 background:#f5f5f5;
 float:left;
}
#footer
{
 width:850px;
 background:#000;
 float:left;
} 
#mainside
{
 width:225px;
 background:url(graphics/hbox.jpg) no-repeat top left;
 float:left;
} 
#maincontent
{
 width:625px;
 background:url(graphics/content.jpg) no-repeat top left;
 float:left;
} 

上面的七行CSS是將網站的整體架構建構出來，如果要將網站內容的排版編排完整，需使用以下CSS排版設定(請按鈕下載檔案)。

以下CSS是每個網站皆可直接複製套用的，但是需要做以下的設定才可以確保網站套用此CSS排版設定不會發生錯誤。

.artboard 的width需設為850px
.mainside 的width需設為225px
.maincontent的width需設為625px