網頁特效：用CSS實現的一個字符顯示效果

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁特效：用CSS實現的一個字符顯示效果

編輯：CSS進階教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>網頁特效代碼|http://homepage.yesky.com/|---用CSS實現的一個字符顯示效果</title><style>body{ font-size:12px; line-height:22px;}#info span{position:absolute;width:523px;height:275px;top:115px; left:10px;background-image: url(http://www.jscode.cn/Uploadfile/200682485616973.GIF);visibility: hidden;}a:link,a:visited{cursor: default;}a:active,a:hover{cursor:auto;}#hi{visibility: hidden; height:1px; overflow:hidden;}#w01 a:hover span,#w02 a:active span{background-position: 0px 0px; visibility: visible;}#w02 a:hover span,#w03 a:active span{background-position: 0px -275px; visibility: visible;}#w03 a:hover span,#w04 a:active span{background-position: 0px -550px;visibility: visible; }#w04 a:hover span,#w05 a:active span{background-position: 0px -825px; visibility: visible;}#w05 a:hover span,#w06 a:active span{background-position: 0px -1100px; visibility: visible;}#w06 a:hover span,#w07 a:active span{background-position: 0px -1375px; visibility: visible;}#w07 a:hover span,#w08 a:active span{background-position: 0px -1650px; visibility: visible;}#w08 a:hover span,#w09 a:active span{background-position: 0px -1925px; visibility: visible;}#w09 a:hover span,#w10 a:active span{background-position: 0px -2200px; visibility: visible;}#w10 a:hover span,#w11 a:active span{background-position: 0px -2475px; visibility: visible;}#w11 a:hover span,#w12 a:active span{background-position: 0px -2750px; visibility: visible;}#w12 a:hover span,#w13 a:active span{background-position: 0px -3025px;visibility: visible; }#info a{width:44px; height:100px;display:block; background:#cc0000; float:left;} </style></head><body><div id="info">  <div id="w01"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w02"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w03"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w04"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w05"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w06"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w07"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w08"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w09"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w10"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w11"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div>  <div id="w12"><a href="http://homepage.yesky.com/" target="_blank"><span></span></a></div></div><p>鼠標移到紅色上邊動一動</p><div id="hi"><img src="http://www.jscode.cn/Uploadfile/200682485616973.GIF" alt="" /></div></body></html>

上一頁:網頁特效之CSS制作的三級下拉菜單
下一頁:技巧再現:css網頁設計技巧

CSS進階教程

CSS教程：徹底弄懂閉合浮動元素: 最近兩個月斷斷續續做了好幾個網站的美工，做的過程中對DIV+Css的標准開發有了進一步的了解。有兩點
web標准化用CSS定義標題的幾個實例: 原文：What is the Best Way to Mark up the Title of a
CSS改變選擇網頁文字背景色: 最近在訪問一個網站的時候，我注意到，當其文字被選中時它有一個匹配他的網站的背景色，這個背景色通常是深

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章