求css+div的一个网页特效

html-css012

求css+div的一个网页特效,第1张

- -

什么叫block显示哦~~~~`

CSS可以一次搞定 用hover+display:none

代码:---------------

<style>

body{ font-size:12pxline-height:1.8font-family:Verdana, "宋体", Arial,Sanstext-align:centerbackground:#FFFcolor:#666margin:50pxpadding:0list-style:none}

a:link,a:visited{color:#000099text-decoration: underline}

a:hover,a:active{color:#000text-decoration: none}

#zishu_test li{ float:leftwidth:14%text-align:centermargin:0 autolist-style:none }

#zishu_test li a{border-right:1px solid #fffborder-bottom:1px solid #fffwidth:100pxheight:110pxbackground:#fffdisplay:blockpadding-top:10pxmargin:auto}

#zishu_test li img{ width:75pxheight:75pxdisplay:blocktext-align:centermargin:autobackground:#FFFpadding:3pxborder:1px solid #D8A18B}

#zishu_test li span{display:none}

#zishu_test li a:hover span{ margin-top:-10pxdisplay:blockborder-bottom:1px solid #666border-right:1px solid #666background:#FA9000width:100pxcolor:#FFFposition:absolute}

* html #zishu_test li a:hover span {margin-left:-8px} /* IE6 */

*+html #zishu_test li a:hover span {margin-left:-8px}/* IE7*/

#zishu_test li a:hover{ border-right:1px solid #D8A18Bborder-bottom:1px solid #D8A18Bwidth:100pxheight:110pxbackground:#F5F5F5display:blockpadding-top:10px}

</style>

</head>

<body>

<div id="zishu_test">

<ul>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>64d / 47 hits</span><img src="http://yy.kijiji.cn/img/p/10000009.jpg">pixu</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>24d / 35 hits</span><img src="http://yy.kijiji.cn/img/p/294343.jpg">秀才</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>66d / 87 hits</span><img src="http://yy.kijiji.cn/img/p/10000010.jpg">透露</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>40d / 34 hits</span><img src="http://yy.kijiji.cn/img/p/11709126.jpg">LIVID</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>47d / 56 hits</span><img src="http://yy.kijiji.cn/img/p/10000002.jpg">老孟</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>42d / 36hits</span><img src="http://yy.kijiji.cn/img/p/11695932.jpg">小玉</a></li>

<li><a href="http://www.zishu.cn/blogview.asp?logID=553"><span>63d / 67 hits</span><img src="http://yy.kijiji.cn/img/p/10000025.jpg">pixu</a></li>

</ul>

</div>

</body>

</html>

就是隐藏

display:none

当前显示的设置为display:block

一般使用脚本实现

比如你要隐藏的元素为<div id="info1"></div>

要显示的元素为<div id="info2"></div>

假设使用jquery控制

代码为以下两句:

$("#info1").hide()

$("#info2").show()