效果：

HTML、JS代码：

   

       算数运算

       

           

数字A

           

       

       

           

数字B

           

       

       

           

结果C

           

       

       

       

       

       

       

       

   

   

外部样式CSS代码：

.box{

    width: 600px;

    height: 500px;

    margin: auto;

    margin-top: 50px;

    border: solid 2px black;

    background: #f1f1f1;

    position: relative;

}

.box span{

    display: inline-block;

    font-size: 30px;

    position: absolute;

    bottom: 480px;

    left:10px;

}

.figureA{

    width: 600px;

    height: 100px;

    margin-top: 50px;

}

.figureB{

    width: 600px;

    height: 100px;

}

.count{

    width: 600px;

    height: 100px;

}

.suan{

    width: 600px;

    height: 100px;

}

.box p{

    display: inline-block;

    font-size: 30px;

    margin-left: 40px;

    margin-top: 20px;

}

.box .s1,

.s2,

.jie{

    width: 400px;

    height: 50px;

    margin-left: 20px;

    margin-top: 20px;

    font-size: 30px;

}

.suan .add,

.jian,

.chen,

.chu{

    width: 100px;

    height: 50px;

    margin-left: 35px;

    margin-top: 50px;

    font-size: 20px;

    border-radius: 20px;

}

.count .jie{

    background: #ebebe4;

}

.suan .add,

.chen{

    background: #ffb6c1;

}

.suan .jian,

.chu{

    background: #87ceeb;

}

相关阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：