<!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>
HTML学习:计算器-最终版

最新推荐文章于 2025-06-17 12:43:47 发布
