運用CSS樣式表編排版面(單欄)

運用CSS編排版面(單欄)
文∕趙英傑

本文將說明使用CSS樣式表編排多欄式網頁的方法。著手編排網頁之前,請先把網頁的外觀格式畫下來,並且替每個分隔空間(例如,放置標題圖片和導覽列的區域、以及內文和註解等區域)設定唯一的名稱。

各區的唯一名稱叫做「類別名稱(class name)」,請使用英文字母開頭,第二個字開始可以是英文或數字,名稱裡面不要加入空格和其他特殊符號。下圖是本文的範例網頁草圖,其中的“titleTxt”(標題文字)包含在”header”區域;”dateTxt”(日期欄位)包含在”middle”區域。 請先預覽本文的完成品(註:本文的範例檔,僅在IE 6.x以及FireFox 1.5.x版瀏覽器上做過測試)。

單欄CSS樣式編排草圖

根據這張草圖,先使用<div>標籤訂出網頁內容的各個區域,整個版型規劃被包含在名叫”content”的區域裡面,如果用蓋房子來比喻,”content”相當於建築物的外牆,”header”, “middle”和”footer”則是裡面的隔間,「樣式類別」名稱要用id屬性標示

<body>
 <div id="content">
   <div id="header">
     <!-- 標題區域 -->
     <div id="titleTxt"> 標題文字 </div>
   </div>
   <div id="middle">
     <!-- 中間區域 -->
     <div id="dateTxt"> 日期欄位 </div>
   </div>
   <div id="footer">
     <!-- 註腳區域 -->
   </div>
 </div>
</body>

接著撰寫CSS樣式。首先設定網頁的背景色和留白樣式(亦即,設定<body>標籤的樣式,修改既有的HTML標籤時,名稱前面不用添加任何符號):

body {
  /* 留白設定成 0 */
  margin:0px;
  /* 背景顏色 */
  background-color:#999;
}

再設定各個「樣式類別」的CSS樣式,名稱前面要加上#號:

/* 設定「外牆」的尺寸 */
#content {
  /* 寬 650 px */
  width:650px;
  /* 白色背景 */
  background-color:#FFF;
  /* 白色、3像素寬的邊框實線 */
  border: #FFF 3px solid;
  /* 留白 5像素 */
  margin: 5px;
}
/* 標題區域 */
#header {
  /* 字體 */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  width:650px;
  height:265px;
  background-image: url(images/clouds_1.jpg);
}
/* 中間(內文)區域 */
#middle{
  padding:5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* 註腳區域 */
#footer {
  color: #FFF;
  height: 40px;
  padding:10px;
  background-color:#333;
}

上面的設定”content”區域設定,會讓”content”區域對齊瀏覽器視窗的左上角,距離左邊和上方留白5像素的位置。若要讓”content”位於瀏覽器中央(就像這個範例一樣),請將左、右留白設定成auto,如下:

#content {
  width:650px;
  background-color:#FFF;
  border: #FFF 3px solid;
  margin: 5px auto;
}

最後設定「標題文字」和「日期」欄位:

/* 標題區域裡的「標題文字」*/
#header #titleTxt{
  /* 頂端內距 */
  padding-top:10px;
  /* 左邊內距 */
  padding-left:10px;
  /* 字體大小 */
  font-size:24px;
  color: #FFF;
}

/* 中間區域裡的日期文字 */
#middle #dateTxt {
  font-size:16px;
  /* 文字靠右對齊 */
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

按此連結下載本文範例檔(此壓縮檔包含三篇文章的範例)。

Posts created 467

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top