Maison > Article > interface Web > 仿Windows计算器（一）??界面部分_html/css_WEB-ITnose
仿Windows计算器（一）??界面部分_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:04:06969parcourir
先说一点题外话，博主毕业于2012年，一直从事开发事业，主要的工作业绩??把别人的代码复制-粘贴-改变量。自己感觉进步不大，最近想跳槽，主要投简历的方向是前端，因为做为女生，对前端页面比较感兴趣，自我感觉达到了入门水平，但是被拒了好多次，这才意识到，所谓的入门，真的是太微不足道了，还是从基础老老实实看起吧。
最近在看《JAVASCRIPT王者归来》，一直看书，手有点痒，想写点东西，又不知写啥，只好自己写写书里的例子，仿WINDOWS的计算器功能，欢迎大家来指点。
好了，?嗦了这么多，就开始说正题。
首先的界面，很简单，只是调了一下布局，样式用的是默认样式，直接上代码。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>仿Windows计算器</title> 6 <style> 7 .content{} 8 div,input{margin:0;padding:0;} 9 .console, .btnBar{margin:3px auto; }10 .console{ height:50px;border:1px solid #09F;width:190px;}11 .btnBar{width:195px; }12 input[type="button"] {width:34px; height:27px;margin-right:5px; display:block; float:left;}13 #equalBtn{height:56px; margin-top:-27px;}14 #n0Btn{width:73px;}15 input[type="text"]{display:block; border:none; height:25px; width:185px; font-size:20px;}16 #btmText{text-align:right;}17 </style>18 </head>19 <body>20 <div class="content">21 <div class="console">22 <input type="text" />23 <input type="text" id="btmText" value="0"/>24 25 </div>26 <div class="btnBar">27 <input type="button" id="mcBtn" value="MC"/>28 <input type="button" id="mrBtn" value="MR"/>29 <input type="button" id="msBtn" value="MS"/>30 <input type="button" id="mpBtn" value="M+"/>31 <input type="button" id="mmBtn" value="M-"/>32 <input type="button" id="bsBtn" value="←"/>33 <input type="button" id="ceBtn" value="CE"/>34 <input type="button" id="cBtn" value="C"/>35 <input type="button" id="pmBtn" value="±"/>36 <input type="button" id="sqrtBtn" value="√"/>37 <input type="button" id="n7Btn" value="7"/>38 <input type="button" id="n8Btn" value="8"/>39 <input type="button" id="n9Btn" value="9"/>40 <input type="button" id="divideBtn" value="/"/>41 <input type="button" id="percentBtn" value="%"/>42 <input type="button" id="n4Btn" value="4"/>43 <input type="button" id="n5Btn" value="5"/>44 <input type="button" id="n6Btn" value="6"/>45 <input type="button" id="multiplusBtn" value="*"/>46 <input type="button" id="divided1Btn" value="1/x"/>47 <input type="button" id="n1Btn" value="1"/>48 <input type="button" id="n2Btn" value="2"/>49 <input type="button" id="n3Btn" value="3"/>50 <input type="button" id="minusBtn" value="-"/>51 52 <input type="button" id="n0Btn" value="0"/>53 <input type="button" id="potBtn" value="."/>54 <input type="button" id="plusBtn" value="+"/>55 <input type="button" id="equalBtn" value="="/>56 </div>57 </div>58 </body>59 </html>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tiff ? 值得你体验一下的可视化的字体对比工具_html/css_WEB-ITnoseArticle suivant：div 位置的奇怪问题_html/css_WEB-ITnose