其實最近的3個CSS技巧都是利用了
<a><span></span></a>
來作變化,
只是今天的是用在
<li>  <a><span></span></a>  </li>

種種技巧還真是方便使用啊,多用幾次熟練一下技術也不錯!
一樣放在我剛剛做的網頁之中
岡山鎮大專青年協會




HTML碼

<ul class="uul">
<li class="first"><a href="http://blog.pixnet.net/edastyle">首頁</a></li>
<li><a href="http://blog.pixnet.net/edastyle">岡大會歷史<span>很長的歷史,不過不知道可以寫什麼鬼東西啊</span></a></li>
<li><a href="http://blog.pixnet.net/edastyle">營隊紀錄<span>資料太多,可能會整理不完</span></a></li>
<li><a href="http://blog.pixnet.net/edastyle">相關文案<span>曾經作過文稿,需要時間作連結</span></a></li>
<li><a href="http://blog.pixnet.net/edastyle">留言板<span>給大家留言的地方囉!!</span></a></li>
<li><a href="http://blog.pixnet.net/edastyle">老人話語<span>專門為老人設置的留言地方</span></a></li>
<li><a href="http://blog.pixnet.net/edastyle">灰暗園地<span>私底下分享知識經驗的地方,會設置密碼</span></a></li>
</ul>



CSS碼

#select{margin-top:-19px;background:#0099cc;}
#select ul{display:block;height:20px;border-left:solid 3px black;margin-left:1em;}
#select ul li{float:left;display:block;height:20px;width:100px;text-align:center;background:#3366ff;font-weight:bold;border-right:solid 3px black;}
#select ul li a{font-size:4mm;color:white;text-decoration:none;}
#select ul li.first{background:#cc00cc;}
#select ul li a:hover{display:block;font-size:4mm;color:white;text-decoration:none;background:#cc33ff;height:20px;width:97px;}
.uul{/*用relative作基準,用z-index最上層*/
position:relative;z-index:100;}
.uul span{/*用absolute設定化外之外*/
position:absolute;left:-10000mm;}
.uul a:hover span{/*用absolute拉回來作各種設定*/
position:absolute;top:10mm;left:10mm;width:90mm;height:10mm;text-align:left;background:lightpink;border:2px dashed black;font:3.8mm;color:mediumvioletred;}

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