Vinh La Kiến

54 bundles
2 files4 months ago
2

Calculator CSS Layout

Calculator CSS Layout

index.htm

1234567891011121314151617181920212223242526272829303132333435363738
<!DOCTYPE html> <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="calculator"> <div class="result"> <span>3.14159</span> </div> <div class="inputs"> <div class="style1Button">AC</div> <div class="style1Button">+/-</div> <div class="style1Button">%</div> <div class="style2Button">/</div> <div class="style3Button">7</div> <div class="style3Button">8</div> <div class="style3Button">9</div> <div class="style2Button">x</div> <div class="style3Button">4</div> <div class="style3Button">5</div> <div class="style3Button">6</div> <div class="style2Button">-</div> <div class="style3Button">1</div> <div class="style3Button">2</div> <div class="style3Button">3</div> <div class="style2Button">+</div> <div class="style4Button"> <div class="box">0</div> </div> <div class="style3Button">,</div> <div class="style2Button">=</div> </div> </div> </body> </html>

style.css

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
* { font-family: Arial, Helvetica, sans-serif; } .calculator { width: 200px; height: 325px; background-color: #000; } .result { width: 100%; height: 83px; font-size: 3rem; padding: 0 8px 0 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; } .result span { color: #fff; } .inputs { width: 100%; height: 250px; } .style1Button { width: 40px; height: 40px; line-height: 40px; margin: 0 0 8px 8px; background-color: #eee; border-radius: 50%; text-align: center; float: left; } .style2Button { width: 40px; height: 40px; line-height: 40px; margin: 0 0 8px 8px; background-color: #ffb300; color: #fff; border-radius: 50%; text-align: center; float: left; } .style3Button { width: 40px; height: 40px; line-height: 40px; margin: 0 0 8px 8px; background-color: #555; color: #fff; border-radius: 50%; text-align: center; float: left; } .style4Button { width: 88px; height: 40px; margin: 0 0 8px 8px; background-color: #555; border-radius: 20px; float: left; } .box { width: 40px; height: 40px; line-height: 40px; color: #fff; text-align: center; }