CSS样式实现计算器

最新推荐文章于 2024-04-05 23:44:28 发布

xyhhhhhhhha

最新推荐文章于 2024-04-05 23:44:28 发布

阅读量1.9k

点赞数

分类专栏：测试

原文链接：https://www.bilibili.com/video/BV1QC4y147Ey?p=10

版权

测试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css样式就是把样式和元素分开了，相当于程序中的函数一样，复用性增强了。
计算器样式：
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--被style夹着的都叫CSS样式，全部都是英文全拼写-->
    <!--标签选择器，对所有的标签都是一样的样式-->
    <!--ID选择器，对某一个制定样式，当前页面最好一个-->
    <!--class选择器，对一个或多个制定样式-->
    <!--组合选择器，利用元素的层次关系进行定位选择，div #id img表示对div标签下的id元素下面的img标签设置样式，表示为a b c或a>b>c-->
    <!--伪类选择器，系统预先的定义-->
    <style>
        /*CSS选择器，决定是影响那个元素*/
        /*标签不用加*/
        /*ID选择器前面必须用#*/
        /*class选择器前面必须用.*/
        /*ID或者class命名不能以数字开头必须以字母开头*/
        .inner{
            width: 120px;
            height: 80px;
            border: solid gray 2px;
            background: aqua;
            float: left;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
        }
        /*实现鼠标浮动即变换样式*/
        .inner:hover{
            background-color: orangered;
            font-size: 40px;
        }
        .meun {
            width: 496px;
            height: 50px;
            margin: auto;
            background-color: gray;
            border: solid 2px gray;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .top {
            width: 492px;
            height: 60px;
            margin: auto;
            background-color: gray;
            border: solid 4px gray;
        }
        .top div:first-child {
            width: 486px;
            height: 55px;
            margin: auto;
            background-color: white;
            border: solid 4px red;
        }
        .max_outer{
            width: 496px;
            height: 420px;
            margin: auto;
            border: solid gray 2px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    </style>
</head>
<body>
<!--div样式很少，只能用css-->
<div class="meun">
    &nbsp;
    <font size="6" color="red">●</font>
    <font size="6" color="blue">●</font>
    <font size="6" color="green">●</font>
</div>
<div class="top">
    <div>

    </div>
</div>
<div class="max_outer">
        <div class="inner">AC</div>
        <div class="inner">+/-</div>
        <div class="inner">%</div>
        <div class="inner">/</div>
        <div class="inner">7</div>
        <div class="inner">8</div>
        <div class="inner">9</div>
        <div class="inner">x</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
        <div class="inner">-</div>
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">+</div>
        <div class="inner">0</div>
        <div class="inner">保留</div>
        <div class="inner">.</div>
        <div class="inner">=</div>
</div>
</body>
</html>

xyhhhhhhhha

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS样式实现计算器

css样式就是把样式和元素分开了，相当于程序中的函数一样，复用性增强了。计算器样式：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  
复制链接

扫一扫