计算器排html页面,htmltest~计算器界面的实现
通過div+css和部分布局的作用，實現了，如下效果的計算器展示頁面
![C%]R$IGDK4J(%3LJXD3]SY.png
，廢話不多說，最主要的還是分享代碼：
html：
Title.
計算器-口 X編輯(E)查看(V)幫助(H)BackspaceCECMC789/sqrtMR456*%MS123-1/xM+0+/-.+=css樣式表：
body{
margin: 0 auto;
}
.counter-body{
position: absolute;
top: 200px;
left: 200px;
border: 2px solid #3335e5;
width: 245px;
height: 210px;
border-radius: 5px;
background: rgba(217, 217, 217, 0.49);
}
.counter-title{
line-height: 26px;
width: 100%;
background: #3335e5;
color:#fff;
}
.counter-title div{
display: inline-block;
}
.counter-title div:first-child{
margin-right: 70px;
}
.counter-title div:nth-child(4){
background: red;
}
.counter-title div:nth-child(2){
font-size: 18px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(4){
padding-left: 9px;
padding-right: 9px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){
border-radius: 2px;
height: 22px;
border: 1px solid #FFFFFF;
}
.counter-title div{
padding: 0 6px 2px 6px;
}
.content-title {
display: table;
}
.content-title div{
padding-left: 10px;
text-align: center;
line-height: 22px;
display: table-cell;
font-size: 12px;
}
.counter-content-input{
padding-left: 10px;
}
.counter-content-input input{
height: 15px;
text-align: right;
width: 220px;
}
.counter-content-btn-row{
vertical-align: middle;
margin-top: -15px;
padding: 25px 10px;
}
.counter-content-btn-col1 div:first-child{
background: rgba(247, 247, 247, 0.87);
text-shadow: 5px 5px 3px #bfbfbf ;
color: #fff;
width: 16px;
line-height: 15px;
}
.counter-content-btn-col1 div:nth-child(2){
background: rgba(247, 247, 247, 0.87);
width: 65px;
padding: 1px 1px;
}
.counter-content-btn-col1 div{
color: red;
background: rgba(247, 247, 247, 0.87);
padding: 1px 1px;
height: 15px;
border-radius: 2px;
text-align: center;
display: inline-block;
font-size: 10px;
margin: 0 1.5px;
border: 1px solid #858585;
width: 46px;
}
.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){
color: blue;
}
.counter-content-btn-row div:nth-child(4n+1){
color: red;
}
.counter-content-btn-col div:first-child{
background: rgba(247, 247, 247, 0.87);
margin-right: 4px;
}
.counter-content-btn-col div{
background: rgba(247, 247, 247, 0.87);
display: inline-block;
border-radius: 2px;
text-align: center;
display: inline-block;
font-size: 10px;
margin: 0 2px;
border: 1px solid #858585;
width: 24.38px;
height: 15px;
}
.counter-content-btn-col1,.counter-content-btn-col{
color: red;
line-height: 15px;
margin: 1.5px 0 ;
}
.counter-content-btn-col div:last-child{
width: 25px;
}
其中，
Paste_Image.png
在這個部分實現的時候出現一個小問題就是有個前邊兒的無字小方框，本來是一個空格就可以搞定，但是由于空格撐不起來，所以在div相應的部分加入了空格 
這個應該是或是這次實現過程中出現的一個小問題吧，
另外說一點，在這次實現的過程中用到了很多偽類選擇器
也相當于是對偽類選擇器的一次練手吧
加油吧~~~
fighting@^-^@
總結
以上是生活随笔為你收集整理的计算器排html页面,htmltest~计算器界面的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Xcode4.5编译ffmpeg成功，过
- 下一篇： 主流服务器虚拟化技术厂商,各大服务器厂商