老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果….囧…先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^
#tb td a { display: block; height: 35px; line-height: 35px; background: #FFF9E0;}#tb td a:hover { background: #E2D9B2;}
關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。
解決了上一篇的高度不能自動延伸的問題之後，馬上會遇到另一個問題。#container 和 #content 延伸了，旁邊兩個區塊卻仍然維持原本的高度，如果要指定背景就很麻煩了。
解決方法：
加入以下 CSS：
#container { overflow: hidden;}#left, #right { padding-bottom: 1000px; margin-bottom: -1000px;}
利用 padding-bottom 設一個足夠容納所有內容的值
再用 margin-bottom 設相同的負值，將版面拉回來
這樣超過的版面就會被 overflow: hidden 隱藏，達到我們想要的效果。
參考文章
最近製作網頁開始試著用純 CSS 來排版了，習慣之後發現真的比表格排版更方便，不過當中也會遇到一些問題，其中一個就是這篇要講的。
現在有個三欄式版面，如圖：
#container { margin:0 auto; width: 780px; height: 100px; background: #ffc; border: 1px solid #000;}#left { float: left; width: 260px; background: #9cf;}#content { float: left; width: 260px;; background: #fcf;}#right { float: right; width: 260px; background: #9cf;}
原本預期當任何區塊內容過多時，外層 container 要能夠自動延伸，包住裡面的子區塊，但實做之後會發現變成這樣：
解決方法：
#container 裡不要指定高度，也就是維持預設的 height:auto; 同時加入 overflow: hidden; 即可。
#container { margin:0 auto; width: 780px; background: #ffc; border: 1px solid [...]
做出來感覺還滿不錯的，簡潔有力，稍微懂一點 CSS 的應該都會，只是經常弄出來的 CSS 都要「特別」針對 IE6 去調整，不然 Firefox 看起來 OK，在 IE 則是完全走樣 ，不過試用了 IE7 beta2，對 CSS 支援度有比較好了，往後設計 CSS 應該可以比較輕鬆點。
另外這個範例用了 Mozilla 的圓角屬性，所以在 IE 只會看到很普通的方形哦。
CSS 導覽列
一般表格的框線即使設為 1px 還是感覺很粗，為什麼呢？因為預設表格框線是不重疊的，而每個儲存格都有著 1px 的框線，所以框線就會變成1+1=2px。因此要利用 CSS 允許表格框線重疊，才能顯示出 1px 的細框線。
table { border: 1px solid #00; border-collapse: collapse;}tr, td { border: 1px solid #00;}
border-collapse: collapse; 即是允許框線重疊。
| 
近期留言