EDA 物．種．原．始

今天我到了離我家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上面吧*/