《
用CSS的overflow控制圖像的顯示大小》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344352013.htm
<ul id="thumbs">
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src=",
用CSS提高網(wǎng)頁在瀏覽器的渲染速度;image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
<li><a href=" src="image.jpg" /></a></li>
</ul>
Html代碼不什么特殊之處，無非是一個無序列表，主要的在羨下面的CSS代碼中：
img{
border:none;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left,
用CSS控制網(wǎng)頁總體風(fēng)格;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;/*此處使鏈接變?yōu)閴K狀顯示，才可以定義寬跟高*/
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;/*定義區(qū)域外隱蔽*/
position:relative;/*絕對對位*/
z-index:1; /*Z軸處于1的地位，為鼠標(biāo)懸浮時做鋪墊*/
}
ul#thumbs a img{
float:left;
position:absolute;/*讓圖像居中顯示的定義局部，包含下面top、left的兩處定位*/
top:-20px;/**/
left:-50px; /**/
}
ul#thumbs a:hover{ /*此處最為重要，當(dāng)鼠標(biāo)挪動到圖像上時，讓圖像顯示，Z軸位置為1000置于最上面*/
overflow:visible;
z-index:1000;
border:none;
}
將上面代碼拷貝到文檔里，然后預(yù)覽一下，當(dāng)鼠標(biāo)移動到圖像上時就可以顯示全部的圖片了,
用CSS控制打印(代碼)，這樣的后果比單單顯示縮略圖像更加生動。
Tag： 把持圖像 overflow ,
用CSS控制IE下中英文字體顯示對齊; CSS 節(jié)制圖像 overflow CSS
--> [
網(wǎng)站建設(shè)之]用CSS的overflow掌握圖像的顯示大小
如上圖所示，圖片在區(qū)域中是居中的，<a>區(qū)域內(nèi)是要顯示的內(nèi)容，<img>灰色區(qū)域是隱藏掉的。下面開端制作：
Html代碼：
制造網(wǎng)頁時常常碰到圖像過大而不能完整展現(xiàn)的麻煩，固然咱們能夠?qū)D片縮小，但縮小的圖片著實(shí)丟臉。
實(shí)在有的時候我們不必定非要將圖片縮小或調(diào)換，可以用CSS的一些屬性來展示圖像，反而更加活潑有趣。
本文為你先容一種應(yīng)用CSS的溢出屬性overflow來控制顯示圖像大小的辦法。
這種方式的原理是：在網(wǎng)頁中插入一個固定大小的區(qū)域，將圖像插入到這個區(qū)域內(nèi)，而后將區(qū)域以外的內(nèi)容全體暗藏掉,用CSS把標(biāo)題超出的部分變成...。
(責(zé)任編輯：網(wǎng)站建設(shè))
用CSS的overflow控制圖像的顯示大小相關(guān)文章