HTML布局之计算器(div+css)_html/css_WEB-ITnose

代码示例:

html(div)代码:

      	                            返回主页  	
  	  		
  			
 
  			
计算器
  			
  				
  				
  				
  			
  		
  		  		
  			
  			
查看(V)
  			
  			
编辑(E)
  			
  			
帮助(H)
  			
  			
  			  			
  				
MC
  				 
                      
MR
                      
                      
MS
                      
                      
M+
                      
                      
M-
                        
←
                      
                      
CE
                      
                      
C
                      
                      
±
                      
                      
√
                        
7
                      
                      
8
                      
                      
9
                      
                      
/
                      
                      
%
                        
4
                      
                      
5
                      
                      
6
                      
                      
*
                      
                      
1/x
                        
1
                      
                      
2
                      
                      
3
                      
                      
-
                      
                      
=
                        
0
                      
                      
.
                      
                      
+
    			
  		
  	
  

CSS代码:

@CHARSET "UTF-8";#container{	position: absolute;	top: 50%;	left: 50%;	margin: -161px -114px;	width: 228px;	height: 322px;	border: 1px black solid;	background: #e6e6fa;	}#title{	width: 100%;	height: 30px;	background: #e6e6fa;}#image{	float: left;	width: 14px;	height: 17px;	margin-top: 6px;	margin-left: 10px;}#word{	margin-top: -8px; !important;		float: left;	width: 60px;	height: 20px;}#word p{	font-size: 14px;	text-align: center;}#select{	float: right;	width: 107px;	height: 15px;		margin-right: 8px;}#min{	float: left;	width: 30px;	height: 18px;}#max{	float: left;	width: 30px;	height: 18px;}#off{	float: right;	width: 47px;	height: 18px;}#main{	width: 212px;	height: 284px;	margin-left: 8px;	overflow: hidden;}#menu{	float: left;	width: 212px;	height: 20px;	background: #dcdcdc;}#menu p{	float: left;	font-size: 15px;	margin-top: 1px;	margin-left: 5px;}.block{	float: left;	width: 15px;	height: 20px;}#frame{	float: left;	width: 190px;	height: 48px;	margin-top: 10px;	margin-left: 3px;}#button{	float: left;	width: 190px;	height: 180px;	margin-left: 11px;}.smallbutton{	float: left;	width: 34px;	height: 25px;	margin-top: 5px;	background: #dcdcdc}.bigbuttonY{	float: right;	width: 34px;	height: 55px;	background: #dcdcdc;	margin-top: 5px;}.bigbuttonX{	float: left;	width: 73px;	height: 25px;	background: #dcdcdc;	margin-top: 5px;}.buttonblock{	float: left;	width: 5px;	height: 25px;}#button p{	text-align: center;	margin-top: 3px;}