用Html5制作一个简单的手风琴,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.box{
width: 450px;
margin: 0 auto;
}
.box h2{
width: 450px;
height: 30px;
background: skyblue;
border-radius: 5px;
}
.menu p{
height: 0;
overflow: hidden;
}
.menu{
margin-top: 20px;
}
.menu a{
display: block;
width: 450px;
height: 30px;
border-radius: 5px;
}
.menu a:hover,.menu :target a{
background: deepskyblue;
}
.menu :target {
height: 150px;
overflow: auto;
}
</style>
<body>
<div class="box">
<div class="menu"><!--每一组-->
<h2><a href="#one">one</a></h2>
<p id="one">人生就如一台戏,它需要每一个角色,黑的、白的、红的、绿的、完整的、残缺的等等,而且缺一不可。大自然有大自然的规律,剧情和舞台也有剧情和舞台的规则,学习着、分析着、吸取着、聪明着,变换着、适应着、快乐着,这才是我们演好每一个角色应持的基本态度。你不能改变天气,但你可以改变心情;你不能选择