计算器css布局实例,HTML布局之计算器(div+css)_html/css_WEB-ITnose

最新推荐文章于 2023-03-13 17:00:23 发布

weixin_39971435

最新推荐文章于 2023-03-13 17:00:23 发布

阅读量473

点赞数

文章标签：计算器css布局实例

本文介绍了一个简单的纯布局计算器设计案例，包含HTML结构和CSS样式代码。该计算器仅涉及UI设计，未实现具体功能，适用于前端初学者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯布局, 没有功能实现, 代码多但是不难, 可以作为参考.

代码示例:

html(div)代码:

计算器返回主页

计算器

查看(V)

编辑(E)

帮助(H)

M+

M-

←

√

1/x

CSS代码:

@CHARSET "UTF-8";#container{position: absolute;top: 50%;left: 50%;margin: -161px -114px;width: 228px;height: 322px;border: 1px black solid;background: #e6e6fa;}#title{width: 100%;height: 30px;background: #e6e6fa;}#image{float: left;width: 14px;height: 17px;margin-top: 6px;margin-left: 10px;}#word{margin-top: -8px; !important;float: left;width: 60px;height: 20px;}#word p{font-size: 14px;text-align: center;}#select{float: right;width: 107px;height: 15px;margin-right: 8px;}#min{float: left;width: 30px;height: 18px;}#max{float: left;width: 30px;height: 18px;}#off{float: right;width: 47px;height: 18px;}#main{width: 212px;height: 284px;margin-left: 8px;overflow: hidden;}#menu{float: left;width: 212px;height: 20px;background: #dcdcdc;}#menu p{float: left;font-size: 15px;margin-top: 1px;margin-left: 5px;}.block{float: left;width: 15px;height: 20px;}#frame{float: left;width: 190px;height: 48px;margin-top: 10px;margin-left: 3px;}#button{float: left;width: 190px;height: 180px;margin-left: 11px;}.smallbutton{float: left;width: 34px;height: 25px;margin-top: 5px;background: #dcdcdc}.bigbuttonY{float: right;width: 34px;height: 55px;background: #dcdcdc;margin-top: 5px;}.bigbuttonX{float: left;width: 73px;height: 25px;background: #dcdcdc;margin-top: 5px;}.buttonblock{float: left;width: 5px;height: 25px;}#button p{text-align: center;margin-top: 3px;}

运行结果: