HTML學習：計算器-最終版
阿新 • • 發佈：2018-12-20
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>計算器-最終形態</title> <style> .outside{ width: 400px; height: 425px; background-color: darkgray; margin: 0 auto; border-top-left-radius: 10px; border-top-right-radius: 10px; } .button{ width: 400px; height: 50px; margin: 0 auto; } #but1{ width: 30px; color: red; font-size: 30px; float:left; } #but2{ width: 30px; color: yellow; font-size: 30px; float:left; } #but3{ width: 30px; color: blue; font-size: 30px; float:left; } .show{ width: 380px; height: 50px; background-color: white; border:solid 2px red; margin: 0 auto; } #abc div{ width: 96px; height: 60px; float:left; background-color: aqua; margin: 2px ; text-align:center; line-height:60px; font-size: 25px; border-radius:5px; } #abc div:hover{ background-color: orangered; } </style> </head> <body> <div class="outside"> <!--外部--> <div class="button"> <div id="but1">●</div> <div id="but2">●</div> <div id="but3">●</div> </div> <div class="show"> </div> <div class="keyboard" id="abc"> <div>AC</div> <div>+/-</div> <div>%</div> <div>÷</div> <div>7</div> <div>8</div> <div>9</div> <div>×</div> <div>4</div> <div>5</div> <div>6</div> <div>-</div> <div>1</div> <div>2</div> <div>3</div> <div>+</div> <div>0</div> <div><-</div> <div>.</div> <div>=</div> </div> </div> </body> </html>