今天終於搞懂一點點CSS的玩意了!
雖然在Javascript裡面這種技術而能事小兒科,
不過我還是喜歡CSS簡單俐落的模樣。

就是下面的紅色框框囉,
http://edastyle.myweb.hinet.net/kca.html
學習真是一條愉快的路,但是找工作卻不是這樣!呼呼~~
俐落,才帥氣啊!

心得重點:

HTML
<li>之後加上class個別標籤,之後在設定個別背景(小圖)
<span>目的為了將文字部份拉出背景(小圖)
CSS
<ul>設定position的relative,方便之後a可以利用top還有left設定文字的位置
<ul>設定高度,是小圖片的高度
<li>設定每個小圖高度+寬度
li.xxxx a span,確實把文字拉到正確位置
利用 li.xxxx a + li.xxxx a:hover 設定背景模樣



Html部份

<div id="happy">
<ul>
<li class="no1"><a href="www"><span>2006年暑假:英語生活營</span></a></li>
<li class="no2"><a href="www"><span>2005年暑假</span></a></li>
<li class="no3"><a href="www"><span>2004年暑假</span></a></li>
<li class="no4"><a href="www"><span>2004年迎新</span></a></li>
<li class="no5"><a href="www"><span>2003年暑假</span></a></li>
<li class="no6"><a href="www"><span>2002年暑假</span></a></li>
</ul>
</div>


CSS部份
#happy ul{/*小圖,僅設定圖片高度*/
position:relative;height:60px;}

#happy li{/*小圖,設定每一個小圖寬高*/
float:left;width:60px;height:60px;display:block;margin-left:10px;}

#happy li a{/*小圖,設定每一個小圖寬高*/
width:60px;height:60px;display:block;}

li.no1 a{/*游標未上之前圖形與文字*/
background:red;text-decoration:none;}
li.no1 a:hover{/*游標上之後圖形與文字*/
background:white;color:white;text-decoration:none;}
li.no2 a{background:red;text-decoration:none;}
li.no2 a:hover{background:white;color:white;text-decoration:none;}
li.no3 a{background:red;text-decoration:none;}
li.no3 a:hover{background:white;color:white;text-decoration:none;}
li.no4 a{background:red;text-decoration:none;}
li.no4 a:hover{background:white;color:white;text-decoration:none;}
li.no5 a{background:red;text-decoration:none;}
li.no5 a:hover{background:white;color:white;text-decoration:none;}
li.no6 a{background:red;text-decoration:none;}
li.no6 a:hover{background:white;color:white;text-decoration:none;}

li.no1 a span{position:absolute;top:70px;left:20px;width:400px;}
li.no2 a span{position:absolute;top:90px;left:20px;width:400px;}
li.no3 a span{position:absolute;top:110px;left:20px;width:400px;}
li.no4 a span{position:absolute;top:130px;left:20px;width:400px;}
li.no5 a span{position:absolute;top:150px;left:20px;width:400px;}
li.no6 a span{position:absolute;top:170px;left:20px;width:400px;}
arrow
arrow
    全站熱搜

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