當滑鼠滑過懸停時變大效果。
首先，先在HTML中製作一個無序清單，並給它ID名為"navlist"
<div
id="navlist">
<ul>
<li><a
href="#">One</a></li>
<li><a
href="#">Two</a></li>
<li><a
href="#">Three</a></li>
<li><a
href="#">Fore</a></li>
<li><a
href="#">Five</a></li>
<li><a
href="#">Six</a></li>
</ul>
</div>
呈現效果 :
2
建立好基本的無序清單後，接著我們要為這個清單下CSS 樣式。
先針對選單本身顯示形式(display)，設定為inline，與內文要素的顯示相同。
#navlist {
display:inline;
3
針對清單設定CSS樣式，設定基本的高度與寬度，浮動向左。
讓選單水平排列，且設定項目符號listy-style為none，這邊不顯示。
#navlist li {
float:left;
width:60px;
height:60px;
list-style:none;
}
呈現效果 :
4
接著開始定義連結選單<a>，先設定基本高度與寬度，但這邊將高度與寬度少10px，
因為我們增加了5px內距，另外設定顯示形式為區塊元素。
#navlist li a {
width:50px;
height:50px;
padding:5px;
display:block;
5
同時，開始定義字體樣式，設定字體顏色、文字裝飾、字級、字型、行高、對齊方向。
color:#FFF;
text-decoration:none;
font-size:7pt;
font-family:arial;
line-height:50px;
text-align:center;
6
接著定義邊界，設定區塊左右兩側為1px邊框，上下則為5px邊框
(這邊指定為5px是要讓上下有增長的感覺)
這裡邊框顏色都使用白色，讓視覺上區塊間有間隔空間。並設定背景色。
border-right:1px solid
#FFF;
border-left:1px
solid #FFF;
border-top:5px
solid #FFF;
border-bottom:5px
solid #FFF;
background:#003663;
}
呈現效果 :
7
最後定義當滑鼠滑過懸停時變大效果。
設定連結滑過的定義選單，更改背景色，改變上下邊框的顏色、字體的大小與重量
呈現做出變大效果。
#navlist li a:hover
{
border-top:5px
solid #004a80;
border-bottom:5px
solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bolid;
}
Posts
