:::

4. CSS的圖片設計

一、製作圓角矩形底圖

  1. 底圖作法和第二節課的作法相似,但這次要分為上、中、下三部份。
  2. 您必須先測量好原來的中間空白處有多大,這樣CSS就可以不用做太多調整。(可用FireFox的WebDeveloper擴充套件中的「其他功能→顯示尺規」來測量)
  3. 詳細作法如下:
  4. 此區到時會以影片播放來呈現

二、製作圓角矩形的頁面

  1. 在page的上下方,各加上一個div,並分別命名為header、foot,如:<div class="header"></div>
  2. 另外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像素

三、將同樣的樣式套用到別頁

  1. 其他頁面若有相同的結構,那麼可以直接套用。
  2. 中的語法獨立存成 xxx.css 檔。
  3. 利用以下語法將CSS檔引入,此語法貼在中即可。
    <link rel="stylesheet" type="text/css" href="xxx.css">
  4. 此乃CSS「連結」的用法,優先權最低,但作用範圍最廣

四、實力測驗~

  1. 請將demo2.txt,作成網頁,然後讓它套用之前的外觀。其中圖片請讓它向左對齊。

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

23人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 23

更多…