線上書籍

Home

[972]CSS打造XOOPS佈景

一、製作圓角矩形底圖

  1. 底圖作法和第二節課的作法相似，但這次要分為上、中、下三部份。
  2. 您必須先測量好原來的中間空白處有多大，這樣CSS就可以不用做太多調整。（可用FireFox的WebDeveloper擴充套件中的「其他功能→顯示尺規」來測量）
  3. 詳細作法如下：
    4. 此區到時會以影片播放來呈現
    var s1 = new SWFObject('http://tad0616.net/uploads/tad_player/mediaplayer.swf','mediaplayer','480','360','6'); s1.addParam('allowfullscreen','true'); s1.addVariable('width','480'); s1.addVariable('height','360'); s1.addVariable('file','http://tad0616.net/uploads/tad_player/80_photoimpact.flv'); s1.addVariable('image','http://tad0616.net/uploads/tad_player/80_photoimpact_new.jpg'); s1.addVariable('backcolor','0x000000'); s1.addVariable('frontcolor','0xFFFFFF'); s1.addVariable('lightcolor','0xFFFF00'); s1.addVariable('screencolor','0xFCFCFC'); s1.addVariable('autostart','false'); s1.addVariable('usefullscreen','true'); s1.write('tad_player_container');

二、製作圓角矩形的頁面

  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，作成網頁，然後讓它套用之前的外觀。其中圖片請讓它向左對齊。