htmltest~计算器界面的实现
生活随笔
收集整理的這篇文章主要介紹了
htmltest~计算器界面的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過div+css和部分布局的作用，實現了，如下效果的計算器展示頁面
![C%]R$IGDK4J(%3LJXD3]SY.png
，廢話不多說，最主要的還是分享代碼：
html： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/counter.css"> </head> <body>.<div class="counter-body"><div class="counter-title"><div>計算器</div><div>-</div><div> 口 </div><div>X</div></div><div class="counter-content"><div class="counter-content-title"><div class="content-title"><div>編輯(E)</div><div>查看(V)</div><div>幫助(H)</div></div></div><div class="counter-content-input"><input placeholder="0." type="text"></div><div class="counter-content-btn-row"><div class="counter-content-btn-col1"><div>?</div><div>Backspace</div><div>CE</div><div>C</div></div><div class="counter-content-btn-col"><div>MC</div><div>7</div><div>8</div><div>9</div><div>/</div><div>sqrt</div></div><div class="counter-content-btn-col"><div>MR</div><div>4</div><div>5</div><div>6</div><div>*</div><div>%</div></div><div class="counter-content-btn-col"><div>MS</div><div>1</div><div>2</div><div>3</div><div>-</div><div>1/x</div></div><div class="counter-content-btn-col"><div>M+</div><div>0</div><div>+/-</div><div>.</div><div>+</div><div>=</div></div></div></div></div> </body> </html>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; } 復制代碼其中，
在這個部分實現的時候出現一個小問題就是有個前邊兒的無字小方框，本來是一個空格就可以搞定，但是由于空格撐不起來，所以在div相應的部分加入了空格 
這個應該是或是這次實現過程中出現的一個小問題吧， 另外說一點，在這次實現的過程中用到了很多偽類選擇器 也相當于是對偽類選擇器的一次練手吧加油吧~~~ fighting~@^-^@~
總結
以上是生活随笔為你收集整理的htmltest~计算器界面的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UITableView(UIScroll
- 下一篇： SQL Server CheckPoin