語軒閣: CSS 語法教學 – 隱藏式訊息區塊

2012年2月8日星期三

CSS 語法教學 – 隱藏式訊息區塊 – 簡易版

CSS 在網頁中佔有很重的地位，有些原本用 JavaScript 產生的效果都能單純使用 CSS 來做到，像是圖片按鈕的變換…等等的。現在要介紹的滑入式訊息選單就是使用 CSS 來做出讓人眼睛為之一亮的效果。

首先來看 HTML 的部份：

使用 <ul> <li> 項目清單，裡面置入標題文字內容文字，還有全部用超連結包起來。

<ul id="gallery">
 <li>
  <a href="http://www.flycan.com.tw/course/jquery.php">
  <h3>jQuery 互動網頁程式應用班</h3>
 <span>jQuery 是一個快速又簡潔的 JavaScript 程式庫，除了簡化 HTML 屬性的存取使用、事件的監聽處理及 Ajax 之外，也解決了大部份瀏覽器間的相容性問題。同時也加入一些不輸給 Flash 的基礎動畫效果，使得我們的網頁不再是死板的回應使用者的動作。透過 jQuery 的程式特性 <strong>...繼續閱讀</strong> </span>
 </a>
 </li>
</ul>

我們使用 UL 及 LI 來當資料排列，每一筆 LI 都是一筆訊息內容，真正的訊息是超連結 A 所包覆的內容。而訊息內容中用 H3 來當主要的標題，其它內容則是放在 SPAN 裡面，如果訊息內容太長時，順便用放個類似 Read More… 的訊息來讓瀏覽者能點下連結。

以上的 <li> 項目清單多做幾個，先看一下 HTML 網頁原始的畫面：

接下來就直接套上最重要的 CSS Code：

ul#gallery  {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 500px;
 height:450px;
 border: 4px solid #fc0;
 background-color: #ff6;
 font: 13px Arial, Helvetica, sans-serif;
}
ul#gallery li a {
 display: block;
 overflow: hidden;
 padding-left: 10px;
 line-height:30px;
 width: 492px;
 height: 30px;
 text-decoration: none;
 color: #600;
}
ul#gallery li a span{ color:#000;}
ul#gallery li a:hover {
 background-color: #fc0;
 height: 170px;
 color: #F00;
}
ul#gallery h3 {
 text-transform: uppercase;
 font: 13px "Arial Black", Arial, Helvetica, sans-serif;
}
ul#gallery b {
 color: #600;
}