通過div+css和部分布局的作用，實(shí)現(xiàn)了，如下效果的計(jì)算器展示頁面

![C%]R$IGDK4J(%3LJXD3]SY.png

，廢話不多說，最主要的還是分享代碼：

html：

Title

.

計(jì)算器-口 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

在這個(gè)部分實(shí)現(xiàn)的時(shí)候出現(xiàn)一個(gè)小問題就是有個(gè)前邊兒的無字小方框，本來是一個(gè)空格就可以搞定，但是由于空格撐不起來，所以在div相應(yīng)的部分加入了空格&nbsp

這個(gè)應(yīng)該是或是這次實(shí)現(xiàn)過程中出現(xiàn)的一個(gè)小問題吧，

另外說一點(diǎn)，在這次實(shí)現(xiàn)的過程中用到了很多偽類選擇器

也相當(dāng)于是對(duì)偽類選擇器的一次練手吧

加油吧~~~

fighting@^-^@

總結(jié)

以上是生活随笔為你收集整理的计算器排html页面,htmltest~计算器界面的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。