萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程: 制作小視圖模式

CSS教程: 制作小視圖模式

class="area">

下面在中模式的基礎上,制作小視圖模式的效果,效果如圖1所示。小視圖模式的日歷實例文件位於網頁CSS教程資源中的“第1O章\03\calendar-small.htm”。

圖1 小視圖模式下顯示日歷

圖1 小視圖模式下顯示日歷

為了便於讀者理解在中模式的基礎上修了哪些CSS設置,這裡將完全保持現有的CSS和HTML不變,然後增加若干條CSS樣式,實現小模式的效果。HTML部分僅在caption部分的3種模式切換的鏈接做了修改,與日歷本身的所有代碼不做任何修改。

一、整體設置

① 首先將整個表格的寬度設置為245像素,將寬度變窄,代碼如下。折疊展開CSS 代碼復制內容到剪貼板

  1. .month {
  2. width:245px;
  3. }

② 把需要隱藏的內容都隱藏起來。代碼如下,即把每列的列頭單元格中的“星期”兩字隱藏,以及把每天的活動安排信息列表隱藏。“星期”兩個字在一開始的時候,都已經放置在span中了,現在將這些span隱藏起來即可。

折疊展開CSS 代碼復制內容到剪貼板
  1. .month th span ,
  2. .month ul {
  3. display:none;
  4. }

至此小視圖模式的外觀已經做好了。但是儀做成這樣還體現不出足夠的“技術含量”,我們還希望鼠標指針經過某個單元格的時候,能夠把活動安排的信息內容以彈出框的形式顯示出來。

二、為IE 8和Firefox制作鼠標指針經過時彈出的信息框

Firefox和IE 8都支持td的“:hover”偽類,也就是可以設鬣“td:hover”的樣式,那麼顯示彈出信息框這個任務就可以完全依靠CSS來完成了。

注意:如果要使IE 8能夠支持“td:hover”,必須正確設置DOCTYPE,設置成xhtml l.0 transitional即可。如果沒有設置DOCTYPE,在IE 8中的表現會和IE 6中一樣。

① 首先實現鼠標指針經過有活動安排的單元格時,使單元格變色。這個要求比較容易實現,具體代碼如下。

折疊展開CSS 代碼復制內容到剪貼板
  1. .month td.active:hover{
  2. background:aqua;
  3. }

② 設置顯示活動安排。摹奉思路是把隱藏的ul再顯示出來,但是需要對樣式做一些調整。假設先僅僅顯示該列表。而不做任何其他調整,代碼為:

折疊展開CSS 代碼復制內容到剪貼板
  1. .month td.active:hover ul{
  2. display:block;
  3. }

這時效果由於顯示了活動信息所在的ul,因此導致表格單元格的高度發生了變化,這不是希望的效果。

③ 這提示我們,為了顯示活動安排信息後,不影響日歷表格本身的單元格,必須使ul脫離標准流,因此必須使用絕對定位。這裡將設置改為:

折疊展開CSS 代碼復制內容到剪貼板
  1. .month td.active:hover ul{
  2. display:block;
  3. position:absolute;
  4. }

這時的效果可以看到已經相當接近目標了。

④ 設置背景色和邊框。背景色使用和日歷上的active單元格相同的背景色即可,邊框用什麼顏色好呢?由於這個邊框會和底下的表格重疊,因此用任何顏色都有可能顯得比較雜亂,這裡用白色是一個比較好的選擇,它可以使彈出的信息和背景上的表格有一定的隔離效果。代碼如下:

折疊展開CSS 代碼復制內容到剪貼板
  1. .month td.active:hover ul{
  2. border:3px #FFF solid;
  3. background:#bde;
  4. display:block;
  5. position:absolute;
  6. }

⑤ 設置margin和padding,使這個矩形內的排版更美觀一些。和前面相似,增加下面兩行設置。

折疊展開CSS 代碼復制內容到剪貼板
  1. margin:10px 0 0;
  2. padding:7px 2px 0 5px;

這兩行代碼的設置含義是,通過padding使信息文字擺放到中間位置,通過margin把這個矩形框整體向下移動一些,否則距離鼠標指針距離位置有些太近了。

注意:為了把這個矩形框整體向下移動一定距離,使用的是margin屬性,而不是通常對絕對定位元素使用的top屬性。這是因為,如果使用top屬性,就必須使鼠標指針經過的單元格成為這個矩形框(本質是一個ul列表)的定位基准,而td的display屬性默認值是一種特殊的類型,不是普通的block,一旦將td的display轉換成block,整個表格的結構就會被破壞,因此這不是可行的方法。如果不使用top屬性,絕對定位的元素仍然在它原來的位置上,這時通過設定margin就可以方便地移動它。這也是一個很有用的技巧,在本教程第4章,專題講解定位屬性的時靛,提到過這個性質。

至此,在Fire fox和IE 8中已經完全實現了小視圖模式的目標。

三、為IE 6制作鼠標指針經過時彈出的信息框

上面一小節介紹的方法對於IE和Firefox是有效的,而對於超過80%的訪問者使用的IE 6該怎麼辦呢?答案只能有一個,那就是JavaScript。

首先用類別來代替偽類,將上面兩段代碼分別增加一個選擇器,如下所示。

折疊展開CSS 代碼復制內容到剪貼板
  1. .month td.active:hover,
  2. .month td.hover {
  3. background:aqua;
  4. }
  5. .month td.active:hover ul ,
  6. .month td.hover ul{
  7. margin:10px 0 0;
  8. border:3px #FFF solid;
  9. padding:7px 2px 0 5px;
  10. background:#bde;
  11. display:block;
  12. position:absolute;
  13. }

為了先檢驗一下這兩個類別是否起作用,可以窿HTML中任意找一個有活動安排的單元格,例如7日這天的單元格,代碼如下。

折疊展開XML/HTML 代碼復制內容到剪貼板
  1. <td class="active">7
  2. <ul>
  3. <li>檢查案例實施進度</li>
  4. </ul>
  5. </td>

將它修改為:

折疊展開XML/HTML 代碼復制內容到剪貼板
  1. <td class="active" onMouseOver="className='active hover';" onMouseOut="className='active';">7
  2. <ul>
  3. <li>檢查案例實施進度</li>
  4. </ul>
  5. </td>

這時這個單元格在鼠標指針經過時,動態地把類別由class="active"改為class="active hover"。同理,當鼠標指針離開的時候,再把類別動態地改回class="active"。當鼠標指針經過“7日”這個單元格時,就出現了彈出的矩形框,而在其他單元格上都沒有,這就證明了上面的方法是可行的。

如果讀者不會使用JavaScript,就可以為每一個有活動安排的單元格,逐一添加這兩句相同的代碼。如果讀者有一定的JavaScript和DOM編程的基礎,則可以寫一小段JavaScript代碼來完成手工的工作。方法是在整個表格的HTML結束以後,即在</table>之後,添加如下一段代碼。

折疊展開JavaScript 代碼復制內容到剪貼板
  1. <script language="javascript">
  2. var days = document.getElementsByTagName('td');
  3. for (var i=0;i<days.length;i++)
  4. if(days[i].className == 'active')
  5. {days[i].onmouseover = function(){ //鼠標在行上面的時候
  6. this.className = 'active hover';
  7. }
  8. days[i].onmouseout = function(){ //鼠標離開時
  9. this.className = 'active';
  10. }
  11. }
  12. </script>

下面簡單講解一下這段代碼的原理。首先通過“document.getElementsByTagName('td');”取得整個文檔的DOM樹中的所有td節點,並以數組的形式存儲在“days”變量中,然後通過一個循環語句,依次檢查每一個td節點。如果某個節點的類別被設置為active,就為該節點的onmouseover事件句柄設置一個函數。在函數中把該函數的類別增加一個hover類別,然後把該節點的onmouseout事件句柄設置為恢復類別的函數。WANGYEXX.COM

這段代碼將在表格裝載完成以後執行一次,就相當於手工為每個active單元格添加代碼。這樣,在IE 6中,也可以實現鼠標指針經過時彈出提示信息的功能了。

此時在浏覽器中可以看到,矩形框的絕對定位在IE中和在Firefox中還是有細微區別的。如果要求嚴格相同的話,可以用前面介紹過的條件注釋的功能,針對IE稍微調整一下margin和padding的值,就可以取得完全相同的效果了。

至此,已經實現了中視圖模式和小視圖模式,並且都保證了可以在IE 6、IE 7/8和Firefox浏覽器中正確顯示。

copyright © 萬盛學電腦網 all rights reserved