CSS+DIV設計實例：Hover over下的邊框變化

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS+DIV設計實例：Hover over下的邊框變化

編輯：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><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">p#outer { 	position:relative; 	float:left; 	margin-top:20px; 	margin-left:20px; 	background: blue; }#outer a {	margin:0; 	background-color:blue;	display:block;	position: relative; 	border:2px dashed red;}#outer a:hover {border:2px dashed #CCFFCC;}#outer img {display:block;border:none;background:#ffffcc;padding:4px;}</style></head><body><h1>Hover over the image to see the double border effect</h1><p id="outer"><a href="#"><img src="http://www.pmob.co.uk/temp/images/screenanother3col.gif" alt="example image border" width="150" height="86" /></a> </p></body></html><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

——您可以運行代碼察看特效，您也可以復制或者另存源代碼。

上一頁:網頁對聯式的圖片廣告代碼
下一頁:CSS+DIV設計實例：看看IE中有關1px的Bug

CSS進階教程

CSS3實例教程:text-shadow屬性實現字體陰影: 文字陰影在很多設計中都有應用，在過去我們只能通過圖片來實現在Web上顯示文字陰影，但是這樣做對不太利
CSS3的box-shadow屬性實現圖層陰影效果: CSS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果。我們來實戰詳解一下這個屬性。1.
小技巧：網頁自動轉向代碼: 自動轉向，也叫自動重定向。自動跳轉，指當訪問用戶登陸到某網站時，自動將用戶轉向其它網頁地址的一種技

DIV CSS 佈局教程網

相關文章