html5 开发备忘

图片背景自适应：

.body_bg{width:100%; height:100%; background: url(../image/bg.jpg) no-repeat; background-size: cover;background-position: center;}

带图片与文字的水平居中

.input_block img{vertical-align:middle; width:20px; padding-left: 10px;}
.input_block span{
  padding-right: 10px;color: #423a33; font-family: cursive; font-size: 16px; display: inline;
  height:100%;
  vertical-align:middle;
  line-height: 35px;
}

自定义弹出框 拼接

.sys_dialog{top:30%; left:10%;width:80%; position:fixed}
.sys_dialog .top img{ width:100%;vertical-align:bottom;}
.sys_dialog .middle{background: url('../image/diglogmiddle.png') repeat-y ;background-size: contain;  height:auto; }
.sys_dialog .bottom img{ width:100% }
<div class="sys_dialog">
			
	<div class="top">
		<img src="../image/diglogtop.png">
	</div>
	<div class="middle">
				
	</div>
	<div class="bottom">
	 <img src="../image/dialogbottom.png">
	</div>
</div>

移动端添加：active 效果

document.body.addEventListener('touchstart', function () { });

.active:active{
  transform: scale(0.8);
}