页面的等比缩放代码,Css代码库,德仔网

代码语言
代码分类
【Css】页面的等比缩放
作者:sjwc / 发布于2014/6/17/ 934
用鼠标缩放界面，实现等比缩放的功能

	样式：
	<style type="text/css">
	*{ margin:0; padding:0;}

	html,body{
	padding:0px!important;
	padding:0px 0px;
	width:100%;
	height:100%;
	overflow:hidden;
	}

	
	#middle{
	position: absolute!important;
	top:0px!important;
	height:auto!important;
	position: relative;
	top:-100px;
	height:100%;
	bottom:0px;
	width:100%;
	background:#ffc;
	text-align:center;
	overflow: auto;
	}

	#one{

	padding-top:0px;
	height:80%;
	bottom:100px;
	width:70%;
	 background:#CF3;
	text-align:center;
	overflow: auto;
	}
	#two{
	height:100%;
	bottom:100px;
	width:30%;
	text-align:center;
	background:#F36;
	overflow: auto;
	}
	#tre{
	height:20%;
	bottom:100px;
	width:70%;
	text-align:center;
	background:#3CC;
	overflow: auto;
	}
	#tex{
	width:100%;
	height:100%;
	margin-left:0px;
	margin-top:10px;
	
	}
	</style>
	界面： <form id="form1" runat="server">

	
	 <div id="middle">
	 <div id="one" style=" float:left;">1</div>
	 <div id="two" style=" float:right;">2</div>
	
	 <div id="tre" cellspacing="0" cellpadding="0" style="word-break:break-all">
	 <input type="text" class="form-control" id="tex" style="column-count:3">
	 </input>
	
	 </div>
	
	 </div>
	
	
	</form>

	

	

	

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head runat="server">
	 <title>DIV Auto Height</title>

	
	<style type="text/css">
	*{ margin:0; padding:0;}

	html,body{
	padding:0px!important;
	padding:0px 0px;
	width:100%;
	height:100%;
	overflow:hidden;
	}

	
	#middle{
	position: absolute!important;
	top:0px!important;
	height:auto!important;
	position: relative;
	top:-100px;
	height:100%;
	bottom:0px;
	width:100%;
	background:#ffc;
	text-align:center;
	overflow: auto;
	}

	#one{

	padding-top:0px;
	height:80%;
	bottom:100px;
	width:70%;
	 background:#CF3;
	text-align:center;
	overflow: auto;
	}
	#two{
	height:100%;
	bottom:100px;
	width:30%;
	text-align:center;
	background:#F36;
	overflow: auto;
	}
	#tre{
	height:20%;
	bottom:100px;
	width:70%;
	text-align:center;
	background:#3CC;
	overflow: auto;
	}
	#tex{
	width:100%;
	height:100%;
	margin-left:0px;
	margin-top:10px;
	
	}
	</style>
	</head>
	<body>
	 <form id="form1" runat="server">

	
	 <div id="middle">
	 <div id="one" style=" float:left;">1</div>
	 <div id="two" style=" float:right;">2</div>
	
	 <div id="tre" cellspacing="0" cellpadding="0" style="word-break:break-all">
	 <input type="text" class="form-control" id="tex" style="column-count:3">
	 </input>
	
	 </div>
	
	 </div>
	
	
	</form>
	</body>
	</html>
试试其它关键字
　等比缩放　
同语言下
可能有用的
sjwc贡献的其它代码(3)