在排版时为了做到统一美观、节约空间,可以把部分内容先做隐藏,让用户有兴趣了解时点击时再做展开显示全部内容。代码如下:
<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>
我们来看看最终效果:
定时关机ZHUEi
V.3.0.3 版发布
安全、便捷、易用!完全免费!以绿色安全的方式进行任务处理,对电脑无影响! 操作方式有定时或倒计时可供选择!