网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

CSS边框特效

关注我吧
 2011/10/6 11:36:26 阅读次数:3531

这段代码适合给CSS新手朋友看,有助于理解CSS中margin属性的应用,这种实现效果实际上是给内层的a标签设置border属性,然后在外层包围的A标签同样设置一个border边框属性,指向a时将其width:设置成本来宽度-去边框宽度,margin设置负值并将为(-)边框宽度,比较简单的效果(呵对于高手来说)。你可以自己写个先。我摸索了好久才做出来的!菜鸟,见笑了。

关键是margin的负值跟A:hover运用

效果图如:

好了贴代码了

<!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=utf-8" />
<title>a样式边框特效</title>
<style type="text/css">
*{padding:0; margin:0; list-style:none;}
ul { width:366px; margin:20px auto; padding:2px 0 0 2px; border:1px solid #ccc;overflow:hidden;background:#FFFFCC}
li {float:left;width:120px;height:152px;padding:0 2px 2px 0; }
a{display:block;overflow:hidden;}
a img{border:none;display:block;margin-bottom:0;width:120px;height:152px;}
a:hover{width:112px;height:144px;border:4px solid #f60;}
a:hover img{width:120px;height:152px;margin:-4px;}
/**原理是固定图片高度用 来控制a的宽度跟margin值**/
</style>
</head>

<body>
<ul>
	<li><a href="#"><img src="http://www.ok22.org/photo/1.jpg" /></a></li>
	<li><a href="#"><img src="http://www.ok22.org/photo/2.jpg" /></a></li>	
	<li><a href="#"><img src="http://www.ok22.org/photo/3.jpg" /></a></li>
	<li><a href="#"><img src="http://www.ok22.org/photo/4.jpg" /></a></li>
	<li><a href="#"><img src="http://www.ok22.org/photo/5.jpg" /></a></li>
	<li><a href="#"><img src="http://www.ok22.org/photo/6.jpg" /></a></li>
</ul>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭