close



這是滑鼠跑到flash teaching那個按鈕時,會出現下面的"flash技巧運用教學文件"的說明

★放在head與</head>之間★

<style type="text/css">
<!--
.info {
position:relative;
margin:2px;
padding:5px;
text-decoration:none;
color:#000;
border:1px solid #ccc;
background: url(img/z1.gif) #fff;
}
.info:hover {
background: url(img/z2.gif) #ccc;
color:#333;
}
.info span {
display: none;
}
.info:hover span {
background: url(img/z3.gif) #fff;
display:block;
position:absolute;
top:30px;
left:30px;
width:130px;
padding:5px;
border:1px solid #ccc;
text-align:left;
color:#000;
}
-->
</style>



★放在body之間★

<a class="info" href="#">One<span>Explain</span></a>
<a class="info" href="#">Two<span>Explain</span></a>
<a class="info" href="#">Three<span>Explain</span></a>
<a class="info" href="#">Four<span>Explain</span></a>


  • 第4-10行 : 設定連結文字樣式
  • 第13-14行 : 滑鼠移至連結
  • 第17行 : 隱藏說明
  • 第20-29行 : 說明區塊樣式,自行調整


摘自於:http://www.hsiu28.net/style/article_detail.php?id=23



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 g7g1g3 的頭像
    g7g1g3

    隨身筆記本

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