TAB效果，五个，竖排横排，左右打开等等你想要的都有

txf2004

浏览: 7065594 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html和css

ASP.net ASP CSS JavaScript XHTML

http://www.corange.cn//uploadfiles/1002-5_52519.jpg

http://www.corange.cn//uploadfiles/1002-55_84369.jpg

http://www.corange.cn//uploadfiles/1002-56_54368.jpg

http://www.corange.cn//uploadfiles/1002-57_95987.jpg

<!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>corange.cn</title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin:10px;
}

#basic-accordian{
border:5px solid #EEE;
padding:5px;
width:350px;
position:absolute;
left:50%;
top:50%;
margin-left:-175px;
z-index:2;
margin-top:-100px;
}

.accordion_headings{
padding:5px;
background:#99CC00;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}

.accordion_headings:hover{
background:#00CCFF;
}

.accordion_child{
padding:15px;
background:#EEE;
}

.header_highlight{
background:#00CCFF;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">

<div id="basic-accordian" >


<div id="test-header" class="accordion_headings header_highlight" >Home</div>



<div id="test-content">


<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
</div>

</div>



<div id="test1-header" class="accordion_headings" >About Us</div>



<div id="test1-content">


<div class="accordion_child">
ASP,PHP,JSP,JS,ASP.NET,DIV,CSS等网站建设相关技术<a href="http://www.corange.cn">www.corange.cn</a>
</div>

</div>



<div id="test2-header" class="accordion_headings" >Downloads</div>



<div id="test2-content">


<div class="accordion_child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br />
</div>

</div>


</div>

</body>
</html>
五个文件打包下载
http://www.corange.cn//uploadfiles/simple_accordions_with_src_64662.rar

分享到：

CSS Sprites技术 | INPUT可编辑， tab 键可切换.

2008-12-05 20:04
浏览 1305
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论