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

《计算器布局层叠样式表.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、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:宋体

2、;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;}.tx

3、t{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:

4、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

5、: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;}