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;}

运行结果: