

一定要會的表格排版寫作基本動作(三)
| 透
過CSS來控制「格/td」,可以有很多排版變化的可能。 | 
加
上邊框 | 
| 給
它陰影效果 可以來位移  | 
也可以旋轉哦 | 
這樣可以為「規律感」的表格,帶來版面上的變化。  | 
|
2015年重新推出有關表格寫作的基本動作系列。
影
音教學內容:
- 使用CSS直接控制儲存格。
 - 使用kompozer直接控制。
 - 利用class來產生陰影及旋轉效果。
 - 利用位置功能來形成創意版型。
 - 混搭DIV & 1px 技法。
 
影音教學範例的 CSS:
<style type="text/css">
.word2015013001 {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}
.word2015013002 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
}
.sha01 {
-webkit-box-shadow: 2px 2px 2px 2px gray;
}
.rot01 {
-webkit-transform: rotate(-8deg);
}
</style>
<style type="text/css">
.word2015013001 {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6;
}
.word2015013002 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
}
.sha01 {
-webkit-box-shadow: 2px 2px 2px 2px gray;
}
.rot01 {
-webkit-transform: rotate(-8deg);
}
</style>
![]()  | 
      一
種空間 
      靜靜的安靜, 是得來不易之覺悟? 貓兒, 是生活的過著的大師。  | 
    
![]()  | 
![]()  | 
![]()  | 
 
夜市的來來往往,是好味道的來源。川流不息的聲響,讓空氣很開放。
注意事項:
當最下方的文字DIV,往上拉時,如果背景色出不來,或文字出不來。沒關係,你把文字DIV設成在版面的最上層,就可以顯現了。
請將向上拉升的Class,設定到文字DIV裡。
<style>
/*將媒材物件接到版面最上層*/
.positionuptop {
position: relative;
z-index: 99;
}
</style>
表格寫作相關主題:
- 慢 工出細活:搞定DIV的調校
 - 快 有變化的版型:表格+CSS:圓角、陰影、旋轉、移動
 - 讓 表格很聽話:把表格當格線用
 - 塊 狀版型寫作實作練習一
 - table + div + click互動的整合性排版寫作
 




沒有留言:
張貼留言