HTML布局之计算器(div+css)_html/css_WEB-ITnose
程序员文章站
2022-04-09 12:26:52
...
纯布局, 没有功能实现, 代码多但是不难, 可以作为参考.
运行结果:
代码示例:
html(div)代码:
计算器 返回主页计算器
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;}
运行结果:
下一篇: thinkphp之框架基础
推荐阅读
-
html开发弹性布局之em的用法解析!
-
html5+css3之CSS中的布局与Header的实现
-
CSS3之圆角_html/css_WEB-ITnose
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
?4种实现多列布局css_html/css_WEB-ITnose
-
DIV+CSS在不同浏览器中的表现_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
html之div始终停留在屏幕中间部分_html/css_WEB-ITnose
-
漫谈css布局_html/css_WEB-ITnose