<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3实现的手风琴分栏显示效果</title>
<style>
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #606061; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size:1em; }
/* CSS Accordion styles */
dl
{
padding: 10px;
min-width: 960px;
}
a.ie { background: transparent; text-decoration: none; }
dl dt
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px solid #cccccc;
margin: 0;
}
dl dt a,
dl a.ie dt
{
color: #ffffff;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
}
dl dd
{
color: #cccccc;
margin: 0;
height: 0;
overflow: hidden;
-webkit-transition: height 1s ease;
}
dl dd p
{
padding: 10px;
margin: 0;
}
dl dd:target
{
height: auto;
}
dl a.ie:hover dd,
dl a.ie:focus dd
{
height: auto;
color: #cccccc !important;
}
@media (-webkit-transition) {
dl dd:target
{
height: 6.667em;
}
}
</style>
<title>Accordian菜单，手风琴菜单，折叠菜单代码</title>
</head>
<body>
<dt><a href="#Section1">Section 1</a></dt>
<dd id="Section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href="#Section2">Section 2</a></dt>
<dd id="Section2">
源码爱好者提供网站源码、网页素材、书籍教程、网页特效代码等，做有质量的学习型源码下载站。
</p>
</dd>
<dt><a href="#Section3">Section 3</a></dt>
<dd id="Section3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href="#Section4">Section 4</a></dt>
<dd id="Section4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
</dl>
</body>
</html>
