Tad 教材網 - 線上書籍

:::

XOOPS佈景製作
=========

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/theme/12.zip)

1\. 設定背景，讓背景圖置中，和邊框緊密結合，且僅垂直重複：  
 <span style="color: rgb(51, 102, 255);">body {  
 margin: 0;  
 padding: 0;  
 background-image: url(images/bg.png);  
 background-repeat: repeat-y;  
 background-position: center top;  
 background-color: #f2f2f2;  
 }</span>

2\. 設定<div>中文字大小、段落行高，並改變段落文字顏色  
 <span style="color: rgb(51, 102, 255);">div {  
 font-size:12px;  
 line-height: 2.2em;  
 color:#404040;  
 }</span>

3\. 設定<div>使之置中，並設定其寬度、高度，並加上外框  
 <span style="color: rgb(51, 102, 255);">div {  
 margin:4px auto;  
 width:250px;  
 height:200px;  
 border:1px solid gray;  
 }</span>

4\. 設定<table id="msg">使之擁有細線框，文字離邊框4px，並自動決定寬度  
 <span style="color: rgb(51, 102, 255);">table#msg {  
 width:auto;  
 border:1px solid gray;  
 border-collapse: collapse;  
 }  
   
 table#msg td{  
 border:1px solid gray;  
 font-size:12px;  
 padding:4px;  
 line-height: 1;  
 }</span>

5\. 讓表格標題內的文字垂直至中技巧，並加上背景圖  
 <span style="color: rgb(51, 102, 255);">table#msg caption{  
 height:50px;  
 line-height:50px;  
 lbackground-color: rgb(153,204,255);  
 background-image: url(images/bg1.png);  
 background-repeat: no-repeat;  
 background-position: right top;  
 }</span>  
   
 6. 設定連結，去除底線，滑鼠移過時，文字變紅色  
 <span style="color: rgb(51, 102, 255);">a {  
 text-decoration:none;  
 color:gray;  
 }  
 </span><span style="color: rgb(51, 102, 255);">  
 a:hover {  
 color:red;  
 }</span>

:::