CSS實現使超級串連放大顯示的研究

css|放大|顯示

代碼如下：

<!--StartFragment--><style type="text/css">
.demo a {
float:left;
margin:5px 1px 0 1px;
width:20px;
height:20px;
color:#999;
font:12px/20px 宋體;
text-align:center;
text-decoration:none;
border:1px solid orange;
}
.demo a:hover {
position:relative;
margin:0 -9px 0 -9px;
padding:0 5px;
width:30px;
height:30px;
font:bold 16px/30px 宋體;
color:#000;
border:1px solid black;
background:#eee;
}
</style>
<div class="demo">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>

　　放大的關鍵在於元素的定位，position:relative 與 負值的margin。補習一下position的知識：

　　設定此屬性值為 absolute 會將對象拖離出正常的文檔流絕對位置而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。

　　要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。

　　設定此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行位移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視地區之外會導致捲軸出現。而放置相對(relative)定位對象在可視地區之外，捲軸不會出現。

　　示範效果：

<style type="text/css">.demo a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋體; text-align:center; text-decoration:none; border:1px solid orange; }.demo a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px 宋體; color:#000; border:1px solid black; background:#eee; }</style><div class="demo"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a></div>

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]