*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年5月9日 星期六

DIV空間位置布局:靠左、置中、靠右、上移、下移、重疊順序



margin
DIV(block區塊)與四邊的距離關係
輕鬆控制DIV:靠左置中靠右上移下移

媒材與媒材之間的空間位置關係,是數位文本寫作的新的文本布局思考方向;就寫作技巧這面向而言,作者再區分出(一)排版寫作與(二)分層文本,這二種寫作的基本技能項目。這二項技能,都是用來處理「空間位置」關係的數位寫作手法。這可以使得數位文本作者有效的「掌握」對數位文本的寫作思考。

排版寫作除了之前教的,用表格的功能來完成外,
使用DIV來完成,是另一種方法。而且,可能是更重要的方法。因 為如果要使用互動寫作,對DIV的互動控制,是更容易的
強烈建議一定要能掌握這種使用DIV的各種寫作手法。
在這裡,我們要來學會對DIV本身移動的寫作手法,亦即對DIV空間位置關係的操作掌握!









    Div  !! 



DIV #2



Div 靠左、靠中、靠右的 CSS:

靠左: margin-left: 0px; 【這是預設值,可不寫;也可以設定靠左的距離,紅字部分】
靠中: margin-left: auto; margin-right: auto; 【要寫這二個才有用】
靠右: margin-left: atuo; margin-right: 0px; 【要寫二個,可以設定靠右的距離,紅字部分】
往上移: margin-top: -120px; 【設定往上移的距離,(負數)紅字部分】
往下移: margin-top: 5px; 【可以設定往下的距離,紅字部分】


另一種class用的 CSS:

<style>
.marleft {
margin-left: 5px;
}

.marcenter {
margin-left: auto;
margin-right: auto;
}

.marright {
margin-left:auto;
margin-right:0px;
}

</style>


教學影音:


補充說明:
事實上,只要是區塊型的元件(block-level elements)都適用上述的CSS操作手法。
常見的區塊型元件有:audio, div, form, h1~h6, ol, p, table, ul, video 等。
另,常見的 inline-block元件有:iframe, img, object。



版面上移後的重疊順序調整

使用 margin-top: -xxpx; 來位移版面後,會出現一個常見的、要去調整的問題。那就是重疊的版面,要如何去調整其重疊的順序?


請看範例:







說明:

我們把下面的DIV內的圖像,使用 margin-top: -200px; 功能上移。一般而言,媒材會有「後壓前」的規則。所以,花壓在海景的上面。

但,如果你想更動重疊的順序呢?請按此看變化


兩個DIV(媒材)可以同時加上下列語法的class

<style>

.positionbefore {
position: relative;
z-index: 2;
}

.positionafter {
position: relative;
z-index: 1;
}

</style>

這樣,重疊的順序就會產生變化。

注意,positon: relative; z-index: x; 這一組(兩個)都要使用,才能有效果。再來,z- index 後面的數字,數字大的,就會在壓在上面。一般 狀況下的預設值為 0 。


更動後的範例HTML語 法:

<div  class="positionbefore"><img style="width: 420px; height: 280px;"
src="圖像網址"><br>
</div>
<br>
<div style="text-align: right; margin-top: -200px;class="positionafter"><img
style="width: 320px; height: 213px;"
src="圖像網址"><br>
</div>



★特別注意事項:視覺的 V.S. 空間的(作用的)

一、如果DIV寬度的設定值,超過了可編輯空間的寬度。那麼,最後就只會是「靠左」這個預設值可起作用。

例如,本編輯區的寬度為578px。

語法:

<div style="width: 620px; border: 1px solid red;">
這是範例DIV。
</div>

呈現:

這是範例DIV。



二、如果DIV內又設定DIV。內部DIV的寬、高又大於外部的DIV。那麼,(預設值中)內部DIV就會「破繭而出」,在視覺中超出於外部DIV。但是 對電腦而言,真正的「實際使用空間」,仍是外部的。請參考詳細教案

語法:

<div style="width: 200px; height: 200px; border: 1px solid red;">
<div style="width: 300px; height: 300px; border: 1px solid blue;">

</div>
</div>
這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。<br>

呈現:


這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。這是接在後面的文字。






使用DIV相 關技巧:

DIV + CSS 隨心所欲搞定網路排版寫作

超快速任意移動物件:position: relative

在div內任意移動編輯物件: position: absolute

隨心所欲移動編輯物件



沒有留言:

張貼留言