慢工出細活：搞定DIV的調校

大開眼界 搞定DIV

各式各樣的文字調校　隨心所欲的文本樣貌
簡單的功能操作法 直覺式的調整變化 立即看見

我想要更進一步了解css div基本語法 click here↗

調整文字與邊界的距離：

CSS > 屬性 > 排版定位 > 補白

練 習作業：

安靜的船中，看著沈靜的橋

構思：

一、上方做一個DIV，裡面有圖像和文字。
二、下方放置大圖。
三、DIV做出padding-left: 25px;（補白／左邊），左邊留白。文字加背景色。
四、大圖用margin-top: -125px;（邊界／頂端），向上移動。

五.、調整DIV的position: relative; （位置／相對）以及z-index: 2；（z軸深度），使DIV向上拉高一層，才不會被蓋住。

練 習作業二：





練習作業三，可互動形態：


呈現樣態：（mouse hover ↓）

   廟宇，那眼神如神。

構思：

一、做DIV，設id（#pichover20171122），內置三張圖。
二、用CSS class來分別為圖片位移以及排定層次順序。
四、套入互動CSS，這是用「父子關係」來寫的。


CSS語法：

<style>
/*層次的位移、排序，放置於img */
.zindex001 {
position: relative;
z-index: 1;
}

.zindex002 {
margin-top: -300px;
margin-left: 240px;
position: relative;
z-index: 2;
}

.zindex003 {
margin-top: -75px;
margin-left: -5px;
position: relative;
z-index: 3;
}

/*互動功能語法，id放置於DIV*/
#pichover20171122 img{
padding: 0px;
transition: 0.3s linear;
}

#pichover20171122 img:hover {
position: relative;
z-index: 9;
transform: translate(3px, -3px);
}

</style>

注意：

CSS的各種用法中，控制權的大小分別為，style > id >選擇器 >class。小心，在這個範例中，互動功能使用到 hover ，而 hover 是以 父子關係選擇器 來驅動。因此，你不能用style="xxx"的方式來處置圖片，那樣的話，hover的效果就會失效（style> 選擇器）。而是要用 .class 來設置圖片。這樣hover互動才會有效。父子關係選擇器 > class 。