:::
3. 文字的CSS外觀排版（下）
4. CSS的圖片設計
一、製作圓角矩形底圖
- 底圖作法和第二節課的作法相似，但這次要分為上、中、下三部份。
- 您必須先測量好原來的中間空白處有多大，這樣CSS就可以不用做太多調整。（可用FireFox的WebDeveloper擴充套件中的「其他功能→顯示尺規」來測量）
- 詳細作法如下：
此區到時會以影片播放來呈現
二、製作圓角矩形的頁面
- 在page的上下方，各加上一個div，並分別命名為header、foot，如：<div class="header"></div>
- 另外body通常也要設成「margin: 0px;」不然原先的底圖會露一點出來～
| .header{ margin: 0px; height:51px; background-image: url(header.png); background-position: center; background-repeat: no-repeat; } |
對應class= header 邊距： 0像素 高度： 51像素 //只要不超過圖片高度即可 背景圖： header.png 背景位置：水平置中 背景重複方式：不重複 |
| .foot{ margin: 0px; height:48px; background-image: url(foot.png); background-position: center; background-repeat: no-repeat; } |
對應class= foot 邊距： 0像素 高度： 48像素 //只要不超過圖片高度即可 背景圖： header.png 背景位置：水平置中 背景重複方式：不重複 |
| body{ 原先設定...略 margin: 0px; } |
對應<body> 邊距： 0像素 |
三、將同樣的樣式套用到別頁
- 其他頁面若有相同的結構，那麼可以直接套用。
- 將中的語法獨立存成 xxx.css 檔。
- 利用以下語法將CSS檔引入，此語法貼在中即可。
<link rel="stylesheet" type="text/css" href="xxx.css"> - 此乃CSS「連結」的用法，優先權最低，但作用範圍最廣
四、實力測驗～
- 請將demo2.txt，作成網頁，然後讓它套用之前的外觀。其中圖片請讓它向左對齊。
