CSS教程: 制作小視圖模式

class="area">

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

圖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浏覽器中正確顯示。