仿当当下拉框特效

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

仿当当下拉框特效

来源：阅读：683 次日期：2014-10-21 15:24:48

温馨提示：小编为您整理了“仿当当下拉框特效”,方便广大网友查阅！

仿当当下拉框特效

代码:

<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<head>

<title> 折叠效果特效</title>

function pucker_show(name,no,hiddenclassname,showclassname) {

for (var i=1 ;i<6 ;i++ )

{

document.getelementbyid(name+i).classname=hiddenclassname;

}

document.getelementbyid(name+no).classname=showclassname;

}

</script>

* {padding:0; margin:0; font:normal 12px 宋体; text-decoration:none; color:#000;}

a {color:#369;}

a:hover {color:#f00; text-decoration:underline;}

#top5 {width:300px; margin:20px; border-bottom:1px solid #ccc;}

#top5 div {clear:left; padding:5px 0 0 15px; background:#fff url(1.gif) no-repeat left 5px; border-top:1px solid #ccc;}

#top5 #box2 {background-image: url(2.gif);}

#top5 #box3 {background-image: url(3.gif);}

#top5 #box4 {background-image: url(4.gif);}

#top5 #box5 {background-image: url(5.gif);}

#top5 .show img {float:left; width:60px; height:85px; margin:0 5px 5px 0;}

#top5 .show h2 {padding:5px 0;}

#top5 .show p {line-height:150%;}

#top5 .hidden {background-position:left center;background-color:#ffd;}

#top5 .hidden img {display:none;}

#top5 .hidden p {display:none;}

</style>

</head>

<body>

<h2><a href=#>网站制作学习网1</a></h2>

<p>作者：折叠效果<br />出版社：中国友谊出版社<br />出版时间：2006-9-1</p>

</div>

<h2><a href=#>网站制作学习网2</a></h2>

<p>作者：折叠效果<br />出版社：陕西师范大学出版社<br />出版时间：2007-9-1</p>

</div>

<h2><a href=#>网站制作学习网3</a></h2>

<p>作者：折叠效果<br />出版社：中国中医药出版社<br />出版时间：2007-2-1</p>

</div>

<h2><a href=#>网站制作学习网4</a></h2>

<p>作者：折叠效果<br />出版社：江苏文艺出版社<br />出版时间：2007-8-1</p>

</div>

<h2><a href=#>网站制作学习网5</a></h2>

</div>

</body>

</html>

更多信息请查看IT技术专栏

上一篇：html select option 如何进行默认选择

下一篇：使用纯css禁用html中a标签无需javascript

手机网站地址：仿当当下拉框特效

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！