分类： 未分类

在排版时为了做到统一美观、节约空间，可以把部分内容先做隐藏，让用户有兴趣了解时点击时再做展开显示全部内容。代码如下:

<style type="text/css">
 .div{
  line-height:25px;
  width:200px;
  position:relative;
  background:#cccccc;
  padding-bottom:10px;
}
.array{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  margin:auto;
  width:10px;
  height:10px;
  border:2px solid #000;
  border-left:0;
  border-top:0;
  transform:rotate(45deg);
}
.div input{
  display:none;
}
.div p{
  height:100px;
  overflow:hidden;
  transition: all 2s;
  -webkit-transition: all 2s;
}
.div input:checked+p{
  height:180px;
}
</style>
<div class="div">
  <label for="checkbox" class="array"></label>
  <input type="checkbox" id="checkbox" >
  <p>
    定时关机ZHUEi<br>V.3.0.3 版发布<br>
　　安全、便捷、易用！完全免费！以绿色安全的方式进行任务处理，对电脑无影响！ 操作方式有定时或倒计时可供选择！
	</p>
</div>

我们来看看最终效果：