解决:需要用css设计我的计算器 [英] SOLVED: Need to style my calculator with css

查看:60
本文介绍了解决:需要用css设计我的计算器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好,我需要帮助。我用html和css制作了一个计算器。现在我需要更像这样的计算器样式http://chrislorensson.com/design/css3-calculator/但是这个链接中的css代码更大更复杂。我还是个初学者。所以任何人都可以帮我按照简单的方式设计我的计算器,就像链接中的那个。这是我的HTML代码:

Hello there, I need a help. I made a calculator using html and css. Now I need to style my calculator more like this http://chrislorensson.com/design/css3-calculator/ But the css code in this link much bigger and complex. I''m still a beginner. So can anybody help me to style my calculator like the one in the link in a simple way. Here is my html code:

<body>
 <table class="calculator" id="calc">
 
 			<tr>
      			<td colspan="4" class="calc_td_result">
<input type="text" name="calc_result" id="calc_result" class="calc_result" onkeydown="javascript:key_detect_calc('calc',event);"/>
      			</td>
   			</tr>
            
            <tr>
            	<td class="calc_td_btn">
                	<input type="button" class="calc_btn" value="M+" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="M-" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="MR" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="CE" onclick= />
                </td>
                
                 <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="←" onclick= />
                </td>
              </tr>
              
              
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="7" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="8" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="9" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="÷" onclick= />
                </td>
                
                 <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="mod" onclick= />
                </td>
            </tr>
            
            
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="4" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="5" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="6" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="x" onclick= />
                </td>
                
                <td class="calc_td_btn" rowspan="3">
                    <input type="button" class="calc_btn" value="=" onclick= />
                </td> 
            </tr>
            
            
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="1" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="2" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="3" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="-" onclick= />
                </td>
            </tr>
            
                
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="0" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="±" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="." onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="+" onclick=+ />
                </td>
            </tr>
        </table>

推荐答案

A great way to learn CSS is to use the css file(s) from the site in question and use it as a starting point. Go into the CSS and play with values until you get it how you like it. Doing it this way will drive you to intelligent and specific questions on how things are done in CSS that will help you learn. Remember that in any software development there is nothing more valuable in learning than the willingness to go into code and break and subsequently fix things to learn how they work.
A great way to learn CSS is to use the css file(s) from the site in question and use it as a starting point. Go into the CSS and play with values until you get it how you like it. Doing it this way will drive you to intelligent and specific questions on how things are done in CSS that will help you learn. Remember that in any software development there is nothing more valuable in learning than the willingness to go into code and break and subsequently fix things to learn how they work.


just learn the basics of CSS from W3Schools.com and you can easily create your own or can esily use the css downloaded for designing your calculator
just learn the basics of CSS from W3Schools.com and you can easily create your own or can esily use the css downloaded for designing your calculator


这篇关于解决:需要用css设计我的计算器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆