当前位置：首页 > 网络学院 > 网页制作 > CSS

CSS+DIV设计实例：Hover over下的边框变化

来源：岁月联盟编辑：zhu 时间：2006-05-26

CSS+DIV设计实例：Hover over下的边框变化内容简介：!DOCTYPE html PUBLIC

<!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设计实例：如何实现让多个DIV排列时居中

下一篇：CSS+DIV设计实例：看看IE中有关1px的Bug

当前位置：首页 > 网络学院 > 网页制作 > CSS

CSS+DIV设计实例：Hover over下的边框变化

图片内容

最近更新

随机推荐