今天我到了離我家1km不到的地方吃飯,沒錯,就是我奶奶家,
順便把我家裏我覺得需要更多陽光的玫瑰花拿去那邊地植了。

但是下午我回到家裏,我依然沒有閒銜枚是幹,我還是挑了一個適合學習的單元。
經過6的小時研究+瑣事,我終於搞懂了,真是相當開心啊!

人生就是這樣,挑戰一些簡單的東西啊。
這次我一樣,我把他放在我新做的網頁之中:
KCA 岡山鎮大專青年協會


這邊我就把我今天經過了解+整理的心得啊!

HTML部份

<a class="cp01" href="#">
<img src="http://p4.p.pixnet.net/albums/userpics/4/1/152941/thumb_1160413373.jpg" _fcksavedurl=""http://p4.p.pixnet.net/albums/userpics/4/1/152941/thumb_1160413373.jpg"" _fcksavedurl=""http://p4.p.pixnet.net/albums/userpics/4/1/152941/thumb_1160413373.jpg"" width="60px" height="60px" border="0" />
<span>岡大會會作網頁的很多,但是好像大家都有比較忙碌一點,我看我就來作一下功德吧!<br>還要順便徵求工作,因為我現在沒有工作!
<img src="http://p4.p.pixnet.net/albums/userpics/4/1/152941/normal_1160413229.jpg" width="400px" height="300px" border="0" />
</span></a>

解說01:<a>包含全部,利用href="#"作為偽裝。<img>這是弟一張圖,僅是小圖。後面在使用<span>包含大圖+文字。
解說02:<a>        <img/小圖>     <span>   <img/大圖> <文字>               <span>      </a>

變形運用:可以在<a>最外面加上<em>或是<strong>來使用在文章之中。


CSS部份


.cp01{/*圖片最外層純設定relative來包含內容*/
position:relative;z-index:0;margin-left:10px;}

.cp01:hover{/*上滑鼠後背景視為隱形*/
background-color:transparent;z-index:50;}

.cp01 span{/*上滑鼠前把他移到畫面之外,不用設定太多,重點在absolute的位置*/
position:absolute;left:-10000px;}

.cp01:hover span{/*上滑鼠後自己隨便設定囉,重點在absolute的位置*/
position:absolute;top:50px;left:-290px;background:black;width:400;height:320;
text-decoration:none;color:white;font:15px;border:3px dashed white;}

#right{z-index:50;}/*必須讓他顯示在最上層才不會蓋到span出現的東西*/
#left{z-index:1;}/*至少不要在span上面吧*/

edastyle 發表在 痞客邦 PIXNET 留言(0) 人氣()