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

最新推荐文章于 2020-01-11 12:43:39 发布

iteye_3224

最新推荐文章于 2020-01-11 12:43:39 发布

阅读量364

点赞数

分类专栏： html和css 文章标签： ASP.net ASP CSS JavaScript XHTML ViewUI

html和css 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

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 οnlοad="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

iteye_3224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TAB效果，五个，竖排横排，左右打开等等你想要的都有

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt..
复制链接

扫一扫