通过div+css和部分布局的作用，实现了，如下效果的计算器展示页面

![C%]R$IGDK4J(%3LJXD3]

，废话不多说，最主要的还是分享代码：

html：    
            
        .
    
        
     
            
      
       计算器
      
            
      
       -
      
            
      
                       口            
      
            
      
       X
      
        
     
        
     
            
      
                
       
                    
        
         编辑(E)
        
                    
        
         查看(V)
        
                    
        
         帮助(H)
        
                
       
            
      
            
      
                
                   
      
            
      
                
       
                    
        
          
        
                    
        
         Backspace
        
                    
        
         CE
        
                    
        
         C
        
                
       
                
       
                    
        
         MC
        
                    
        
         7
        
                    
        
         8
        
                    
        
         9
        
                    
        
         /
        
                    
        
         sqrt
        
                
       
                
       
                    
        
         MR
        
                    
        
         4
        
                    
        
         5
        
                    
        
         6
        
                    
        
         *
        
                    
        
         %
        
                
       
                
       
                    
        
         MS
        
                    
        
         1
        
                    
        
         2
        
                    
        
         3
        
                    
        
         -
        
                    
        
         1/x
        
                
       
                
       
                    
        
         M+
        
                    
        
         0
        
                    
        
         +/-
        
                    
        
         .
        
                    
        
         +
        
                    
        
         =
        
                
       
            
      
        
     
    
    
css样式表：body{    margin: 0 auto;}.counter-body{    position: absolute;    top: 200px;    left: 200px;    border: 2px solid #3335e5;    width: 245px;    height: 210px;    border-radius: 5px;    background: rgba(217, 217, 217, 0.49);}.counter-title{    line-height: 26px;    width: 100%;    background: #3335e5;    color:#fff;}.counter-title div{    display: inline-block;}.counter-title div:first-child{    margin-right: 70px;}.counter-title div:nth-child(4){    background: red;}.counter-title div:nth-child(2){    font-size: 18px;}.counter-title div:nth-child(2),.counter-title div:nth-child(4){    padding-left: 9px;    padding-right: 9px;}.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){    border-radius: 2px;    height: 22px;    border: 1px solid #FFFFFF;}.counter-title div{    padding: 0 6px 2px 6px;}.content-title {    display: table;}.content-title div{    padding-left: 10px;    text-align: center;    line-height: 22px;    display: table-cell;    font-size: 12px;}.counter-content-input{    padding-left: 10px;}.counter-content-input input{    height: 15px;    text-align: right;    width: 220px;}.counter-content-btn-row{    vertical-align: middle;    margin-top: -15px;    padding: 25px 10px;}.counter-content-btn-col1 div:first-child{    background: rgba(247, 247, 247, 0.87);    text-shadow: 5px 5px 3px #bfbfbf   ;    color: #fff;    width: 16px;    line-height: 15px;}.counter-content-btn-col1 div:nth-child(2){    background: rgba(247, 247, 247, 0.87);    width: 65px;    padding: 1px 1px;}.counter-content-btn-col1 div{    color: red;    background: rgba(247, 247, 247, 0.87);    padding: 1px 1px;    height: 15px;    border-radius: 2px;    text-align: center;    display: inline-block;    font-size: 10px;    margin:  0 1.5px;    border: 1px solid #858585;    width: 46px;}.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){    color: blue;}.counter-content-btn-row div:nth-child(4n+1){    color: red;}.counter-content-btn-col div:first-child{    background: rgba(247, 247, 247, 0.87);    margin-right: 4px;}.counter-content-btn-col div{    background: rgba(247, 247, 247, 0.87);    display: inline-block;    border-radius: 2px;    text-align: center;    display: inline-block;    font-size: 10px;    margin:  0 2px;    border: 1px solid #858585;    width: 24.38px;    height: 15px;}.counter-content-btn-col1,.counter-content-btn-col{    color: red;    line-height: 15px;    margin: 1.5px 0 ;}.counter-content-btn-col div:last-child{    width: 25px;}复制代码

其中，

在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框，本来是一个空格就可以搞定，但是由于空格撑不起来，所以在div相应的部分加入了空格&nbsp

加油吧~~~ fighting~@^-^@~