布落格寫作07：div 堆積木排版寫作

什麼是網路排版寫作？ 【教學說明 show/hide】
這就是說一位布落客作者在寫作時，不但要思考內容是什麼，同時也要思考版型的樣態會是什麼樣子。以前的傳統寫作，內容及版型的產製是分開的，所以有作者、 有美編；但在網路布落格中，一位作者要同時來處理兩種工作項目。換言之，作者與美編的工作性質會同時存在於布落客作者。這是第一點。
第二點是，正如同大家所熟悉的，網路的文本是很視覺化的，比較接近傳統的「圖文整合」式的文本表現。一位作者在寫作時，要能同時構思版型；這不但能讓作者 準確的把各種文本素材掌握好，同時也是要透過圖文的互文性來傳達出作者的想法和企圖。
第三點，要達成排版寫作，最基本的技法即是用div區塊的推疊。就像是堆積木一樣，讓幾塊div區塊相互的推疊起來，就可以快速的完成一種簡單的圖文整合 版型的寫作。

Div 區塊堆疊排版寫作的互動範例【click】↗

Div區塊排版寫作相關CSS語法： margin: 20px; 外邊距。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕。 margin-top: 20x; 上外邊距。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。 padding: 20px; 外邊距。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕。 padding-top: 20x; 上外邊距。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。 border-style: solid; 框線樣式。〔solid 實線／dotted 虛線／dashed 短折線／double 雙重 線〕。〔border-*-style: 樣式; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕 border-width: 2px; 框線粗細。〔實線／百分比〕。〔border-*-width: 粗細; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕 border-color: red; 框線顏色。〔顏色值〕。〔border-*-color: 顏色; 指定邊框； *(-top 上/ -right 右/ -bottom 下/ -left 左)〕。〔全/ 上 右 下 左/ 上 (左右) 下/ (上下) (左右)〕 （合併）border: solid 1px red; 框線（樣式 粗細 顏色）。 border-top: solid 1px red; 上邊線。〔-top 上/ -right 右/ -bottom 下/ -left 左〕。 width: 30px; 寬度。〔數值/ 百分比/ auto〕。 height: 30px; 高度。〔數值/ 百分比/ auto〕。 float: left; 浮動。〔left 左/ right 右/ none 取消〕。 clear: both; 清除浮動。〔none 不清除/ left 解除靠左浮動/ right 解除靠右浮動/ both 解除浮動〕。 overflow: scroll; 捲軸。〔visible 顯示/ hidden 隱藏/ scroll 固定捲軸/ auto 自動捲軸〕。 overflow-x: scroll; x軸捲軸。〔-y y軸捲軸〕〔scroll/ hidden〕。 overflow: -webkit-marquee; 跑馬燈。 visibility: hidden; 不可見。〔visible 可見/ hidden 不可見〕。 opacity: 0.2; 透明度。〔0~1.0 消失~全顯〕。

看懂上面的簡表＆div 的css語法特色。

Div區塊CSS語法網路外部資源：

1. HTML 教學之容器（樣式）
2. CSS 語法教學
3. W3School CSS教程
4. CSS(Cascading Style Sheet) Note

Div區塊lmc的網路教學：

1. 我 也會 CSS 排版功力大躍進
2. DIV + CSS 隨心所欲搞定網路排版寫作
3. CSS 的文字魔術
4. 圖 像的置左、置中、置右：CSS 搞定照片