HTML制作计算器（二）

最新推荐文章于 2022-08-18 21:01:27 发布

baidu_27670713

最新推荐文章于 2022-08-18 21:01:27 发布

阅读量2.6k

点赞数

文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/baidu_27670713/article/details/107767763

版权

前面已经把计算器的元素用HTML给罗列出来了，把文件用浏览器打开，由于没有加入CSS代码，会发现非常的丑，现在我们就计算器各按钮的布局、样式进行调整，使之整齐简洁。
下面是代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        #outBord {
            border-style: solid;
            width: 292px;
            height: 374px;
            color: rgb(192, 192, 192);
            background-color: rgb(192, 192, 192);
        }
        
        #buttons {
            margin: -2px 0px 0px;
        }
        
        .input1 {
            background-color: rgb(233, 233, 233);
            padding: 0px;
            width: 292px;
            height: 50px;
            border: none;
            margin: 0px 0px 2px;
        }
        
        .input2 {
            margin: 2px 0px 0px;
        }
        
        .button {
            background-color: rgb(233, 233, 233);
            width: 70px;
            height: 50px;
            border: none;
            margin: 2px 0px;
        }
        
        .button1:hover {
            background-color: rgb(192, 192, 192);
            color: white;
        }
        
        .button0 {
            width: 144px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="outBord">
        <div>
            <input class="input1">
        </div>
        <div>
            <input class="input1 input2" type="button">
        </div>
        <div id="buttons">
            <div>
                <button class="button button1">AC</button>
                <button class="button button1">C</button>
                <button class="button button1">%</button>
                <button class="button button1">/</button>
            </div>
            <div>
                <button class="button button1">7</button>
                <button class="button button1">8</button>
                <button class="button button1">9</button>
                <button class="button button1">*</button>
            </div>
            <div>
                <button class="button button1">4</button>
                <button class="button button1">5</button>
                <button class="button button1">6</button>
                <button class="button button1">-</button>
            </div>
            <div>
                <button class="button button1">1</button>
                <button class="button button1">2</button>
                <button class="button button1">3</button>
                <button class="button button1">+</button>
            </div>
            <div>
                <button class="button button1 button0">0</button>
                <button class="button button1">.</button>
                <button class="button button1">=</button>
            </div>
        </div>
    </div>
</body>

</html>

运行结果如下：
计算器样式
知识点总结：

HTML中嵌入CSS代码的几种方式：

内联样式- 在HTML元素中使用"style" 属性
内联样式添加CSS代码不需要使用CSS的选择器，该代码只作用于它缩嵌入的元素。
内部样式表 -在HTML文档头部 “head"区域使用"style” 元素来包含CSS
内部样式表由于CSS代码被统一添加在“head”区域，代码中CSS属性与它所作用的元素被写在了不同的位置，所以需要用到各种选择器来选择所要作用的元素。
外部引用 - 使用外部 CSS 文件
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

CSS 盒子模型

CSS盒子模型
从外到内依次为外边距、边框、内边距和内容。当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，完整大小的元素，还必须添加内边距，边框和边距。这使得我们设定万长宽之后可能仍然不知道元素所占的总空间的大小，利用CSS3的box-sizing属性可以改变这一状况。

box-sizing的值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

box-sizing取为border-box的情况下设置的长宽为元素所占的真实大小

class的使用

一个HTML元素可以设置为多个class属性，如 “button class=“button button1””，button和button1里的某些属性可能会冲突，起冲突的属性浏览器会以后面的class为准。

CSS选择器

CSS提供了诸多的选择器来选择HTML元素，利用好CSS选择器可以大大提高CSS编码的效率，在开启CSS编码之前应先熟悉各个选择器的作用效果，以便在编码时随时查阅。

关于计算器的功能，CSS代码做不到，需要JavaScript代码实现。

baidu_27670713

关注

0
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
HTML制作计算器（二）

前面已经把计算器的元素用HTML给罗列出来了，把文件用浏览器打开，由于没有加入CSS代码，会发现非常的丑，现在我们就计算器各按钮的布局、样式进行调整，使之整齐简洁。下面是代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/css"> #outBor
复制链接

扫一扫