這是一個很可愛的滑鼠滑動的動畫效果。當滑鼠停留在選單項目上方時,項目下面會出現一方塊跟著滑鼠移動,經常出現在一些flash的選單效果上,現在介紹的是使用jQuery的plugin,來模擬這個動畫效果。

事前準備
針對html、css及js三部份各有基本需要的code,跟著以下步驟設定即可以輕鬆呈現效果囉
+Read more
這是一個很可愛的滑鼠滑動的動畫效果。當滑鼠停留在選單項目上方時,項目下面會出現一方塊跟著滑鼠移動,經常出現在一些flash的選單效果上,現在介紹的是使用jQuery的plugin,來模擬這個動畫效果。

針對html、css及js三部份各有基本需要的code,跟著以下步驟設定即可以輕鬆呈現效果囉
+Read more由於各家瀏覽器對CSS支援程度不同,且CSS設計時需兼顧網頁的美觀,所以自己設計CSS不見得會比資料庫網頁輕鬆。「Dynamic Driver CSS Library」網站(網址:http:// www.dynamicdrive.com/style)上提供多種CSS,是一個值得您參考的網站。
【圖21 「Dynamic Driver CSS Library」網站提供多種CSS樣式可供設計參考】
當我們在定義樣式時,除了網頁標籤外,我們還可自訂class或id名稱,而這兩者有何不同呢?
有些當我們在設定樣式時,有些標籤可能會有不同的樣式設定,例如前面我們提到,可能在一篇文章裡,我們就需要字型15pt與12pt,兩種字型也有不同的顏色,那我們該怎麼設定呢?class與id可以幫助您做到這一件事情。
當我們要使用class方式宣告樣式,我們得在樣式名稱前面加上句點(.),例如以下的網頁:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>使用class1</title>
<style type="text/css">
.normalfont{font-size: 12pt; color: #0000ff}
.largefont {font-size: 15pt;color: #d77c1a}
</style>
</head><body>
<font class="normalfont">PHP圖書</font><br>
<font class="largefont">歡迎來到php6的世界</font>
</body></html>
如此這兩段同用<font>標籤的文字就會套用不同的樣式。