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

2014年9月19日 星期五

慢工出細活:搞定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 。



沒有留言:

張貼留言