您的位置：首页 > Web前端 > CSS

利用htm+css+js编写一个网页计算器

2017-07-12 19:21 513 查看
前言：学了前端也一段时间了，这段时间学校组织集中培训，老师留了一些小项目来做，计算器就是其中一个。所以打算好好来分析动手做一个计算器。这篇博客先只介绍布局，具体的核心计算器思路将在下一篇博客介绍。从布局来说，我们需要一个计算器整体div，计算器里面需要含有屏幕，按钮 。按钮应该有0-9数字，以及加减乘除字符串。总体来讲是一个很简单的布局，如图。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="container">
<p id="result"></p>
<a>C</a>
<a>+</a>
<a>/</a>
<a>*</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>-</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>+</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>=</a>
<a>0</a>
<a>.</a>
</div>
</body>
</html>
接下来是引用的css文件里面的内容
*{margin: 0;padding: 0;}html,body{height: 100%;width: 100%;}#container{height: 620px;width: 400px;position: relative;top: 50%;left: 50%;margin-left: -200px;margin-top: -350px;background: silver;background: url(../img/bg.png); /* 此处设置整个计算器的样式 */}#result{width: 380px;height: 65px;position: relative;margin: auto;top: 25px;line-height: 65px;background: silver;border-radius:10px;text-align: right;font-size:50px ; /* 此处设置屏幕的样式 */}#container a{display: block;width: 75px;height: 75px;float: left;background: silver;top: 40px;margin-top:20px;margin-left: 20px;position: relative;color: black9533;line-height: 75px;text-align: center;font-family: 微软雅黑;font-size: 50px;border-radius:10px;cursor: pointer;/* 此处设置每个按钮的样式  */}#container a:hover {background: white;/* 为每个按钮增加一个悬浮效果 背景变色 */}#container a:nth-child(2){/*  为了使计算机更加美观 将一些特定的按钮 设置不同的大小   这里使用绝对定位是因为先前的按钮设置了相对定位 改变宽高以后会导致 计算器按钮布局的变形*/width: 170px;}#container a:nth-child(17){position: absolute;top:485px ;width: 170px;}#container a:nth-child(18){position: absolute; /* 此处与上相同*/top: 485px;left: 190px;}#container a:nth-child(16){ /* 上同 */height: 170px;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航