a 針對連結的一般設定
a:link 連結正常狀態
a:visited 已造訪過的連結
a:hover 滑鼠移上時的狀態
a:active 滑鼠點下時的狀態
相關屬性:
text-decoration: none/overline/underline/line-through/blink/inherit
(由於border的樣式比較多, 因此也可消除底線之後使用 border 設計新的底線外觀)
display:block
(搭配 background-color 屬性將連結作為區塊顯示)
*連結可用span標籤夾分隔符號(如: | )隔開
*可以利用
display:none;
將不想顯示的資訊隱藏(也可用於預載必要的圖檔)
--------------------------------------------------------------
下拉選單:(需配合 javascript)
.menu{
position:relative;
left:0;
top:0;
}
.submenu{
visibility:hidden;
position:absolute;
left:0;
/* 將子選單的 position 設成 absolute;
left 設成0 避免隱藏時滑鼠仍感應到子選單範圍 */
}
#menu1{
left:0;
top:0;
}
#menu2{
position:absolute;
left:200px;
top:0;
}
...
javascript部分則可以下類似這樣的描述
function showSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="visible";
}
function hideSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="hidden";
}
沒有留言:
張貼留言