Javascript计算器（二）-简单的布局与美化

上一次简单地做出了计算器基本功能的实现部分，接下来的任务首先就是布局与美化。
这是最终半成品的样子

布局时使用了DIV区域来布局
首先遇到的第一个问题就是，在一个大的div下附属div的换行问题，查阅了资料之后，发现用float属性是一种解决方法，并且可以通过限制div区域大小来实现自然地换行，于是正在斟酌了多个区域并行和一个区域让按钮自然换行两种方案之后，选择了自然换行的策略
而在按钮的样式方面，使用了现成已经有的，感觉还算美观
其他在布局方面，就是一些距离的调整了，这都是杂项
下面附上内联的样式表

<style>
    body{
        background:#bbbbbb;
    }
    #main{
        border: groove;

        border-color: black;
        position: absolute;
        top: 100px;
        left: 100px;
        width: 670px;
        height: 527px;
    }
    .input{
        position: absolute;bottom: 80%;
        top: 0%;
        left: 0px;
        right: 0px;
    }
    #screen{
        border: none;
        height: 100px;
        width: 650px;
        outline-style: none;
        background-color: #bbbbbb;
        text-align:right;
        color: white;
        font-family:Consolas;
        font-size: 90px;
    }
    .number{
        position: relative;
        float: right;
        top: 30px;
        width: 590px;
        height: 500px;
        right: 100px;
    }
    .cal{
        position: relative;
        float: right;
        top: 30px;
        width: 80px;
        left: 570px;
    }
    .sign{
        position: relative;
        margin: 8px;
        top: 102px;
        float: right;
    }
    .shuzi{
        position: relative;
        margin: 8px;
        top: 102px;
        float: right;
    }
    </style>

中间有一些类的名字会与之后的源码相对应
在功能的实现方面也是简单的堆砌，还没有真正去实现有难度的部分，这一次的改进主要是为了设计
最后附上body部分代码，实现功能的脚本就不贴出来了

 <div id="main">
<div class="input"><input type="text" id="screen" name="screen" value="0"></div>
<div class="number">
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >1</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >2</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >3</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="exp(10);">10<sup>x</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="exp();">e<sup>x</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">x<sup>y</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">x<sup>3</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >4</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >5</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >6</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">x<sup>2</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">shift</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc(this.innerHTML);">ln</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);"></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >7</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">8</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);">9</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc(this.innerHTML);" >sin</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc(this.innerHTML);" >cos</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc(this.innerHTML);" >tan</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="input(this.innerHTML);" >x!</button></div>
    <div class="shuzi"><button type="button" class="button button-3d button-box button-jumbo button-circle"  onclick="input(this.innerHTML);">.</button></div>
    <div class="shuzi"><button type="button" class="button button-3d button-pill button-jumbo"  onclick="input(this.innerHTML);" >0</button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc('asin')" >sin<sup>-1</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc('acos');" >cos<sup>-1</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="inputfunc('atan');" >tan<sup>-1</sup></button></div>
    <div class="shuzi"><button type="button" class="button button-3d  button-jumbo button-circle"  onclick="randomgen();" >Rand</button></div>
    <div class="shuzi"><button type="button" class="button button-3d button-royal button-jumbo"  onclick="BackS();" >DEL</button></div>
    <div class="shuzi"><button type="button" class="button button-3d button-glow button-jumbo"  onclick="clearS();" >AC</button></div>
</div>

<div class="cal">
    <div class="sign" id="plus"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle"  onclick="calc(this.innerHTML);">+</button></div>
    <div class="sign" id="min"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle"  onclick="calc(this.innerHTML);">-</button></div>
    <div class="sign" id="and"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle"  onclick="calc(this.innerHTML);">×</button></div>
    <div class="sign" id="de"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle"  onclick="calc(this.innerHTML);">÷</button></div>
    <div class="sign" id="eq"><button type="button" class="buttonorange button-3dred button-box button-jumbo button-circle"  onclick="equal();">=</button></div>
</div>
</div>