计算器布局 层叠样式表.docVIP

Calculator：Div+Css 布局实现计算器布局 前言：Windows自带的计算器的截图： 通过div+css 可以实现如下图的布局： 具体用到的样式表文件如下： body{ padding-top:100px; margin-top:0px; text-align:center; background:red; } #container{ width:350px; height:90px; margin:0; padding:0; background:rgb(3,43,78); } .button1{ margin-bottom:5px; width:60px; font-family:宋体; font-size:12px; text-align:center; } .button{ padding:0; width:40px; font-family:宋体; font-size:12px; text-align:center; float:right; } .button3{ margin-top:5px; margin-bottom:5px; margin-left:2.5px; margin-right:2.5px; padding:0; float:right; width:30px; font-family:宋体; font-size:12px; height:20px; } .txt{ margin:10px; padding:0; float:left; font-family:宋体; font-size:14px; color:white; text-align:left; } .txt2{ margin:10px; padding:0; float:right; font-family:宋体; font-size:12px; color:white; text-align:right; } .txt3{ clear:both; width:200px; height:14px; margin-top:0px; margin-left:10px; padding:0; float:left; font-family:宋体; font-size:12px; text-align:left; } .kuang{ float:right; margin-top:5px; margin-right:10px; width:330px; height:18px; border-style:groove; text-align:right; } #anniu1{ float:right; text-align:center; margin-top:10px; margin-right:5px; } #anniu2{ margin-top:45px; margin-left:5px; float:left; } .anniu3{ margin-left:5px; margin-top:5px; margin-bottom:5px; } #main{ width:260px; height:90px; float:right; margin-right:8px; margin-bottom:10px; margin-top:10px; } #left{ float:left; width:50px; height:90px; margin-bottom:20px; margin-left:10px; } #zhuyao{ width:100%; height:90px; }