【前端】HTML和CSS案例计算器页面效果（起点闭关计划）

我叫王不见

已于 2022-02-19 13:48:11 修改

阅读量492

点赞数 1

分类专栏：前端文章标签：开发语言后端前端 css

于 2022-02-19 13:47:46 首次发布

本文链接：https://blog.csdn.net/weixin_48680173/article/details/123014267

版权

本文介绍了如何使用HTML和CSS创建一个计算器页面，能够执行基本的加减乘除运算。通过提供的代码示例展示了页面结构，并提及了可以进一步优化页面样式。

摘要由CSDN通过智能技术生成

利用HTML\CSS实现计算器页面效果，能够进行简单地+-*/计算

代码实现：

外联样式表代码：


	*{
		padding: 0px;
		margin:0px;
		border:0px;
	}


.max{
	margin-top: 200px;
	width: 300px;
	height: 200px; 
	border: 1px #000000 solid;
	margin:auto;
	background-color: ;
	font: "微软雅黑";
	align: center;
	
}
	
.plus,.divide,.min,.multiply{
	float: left;
	margin-left: 45px;
	margin-top: 20px;
	border: 1px #000000 solid;
	width: 20px;
	height: 20px;
	
}	
.black{
	clear: left;
}
	
.num1,.num2{
	float: left;
	margin-left: 45px;
	margin-top: 20px;
	border: 1px #000000 ;
	width:300px ;
}
	
	
.result{
	margin-left: 45px;
	margin-top: 20px;
}
input{
	border: 1px #000000 solid;
}

页面代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="作业1.css&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我叫王不见

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】

孤寒者的博客

08-24

20万+

刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：

前端技术搭建一个有趣的计算器（内含源码）

官方推荐

07-24

3万+

通过前端基础HTML、CSS、JS来带领大家用几十行代码来实现了一个有趣的计算器功能；帮助更多前端小白来感受三件套的搭配使用

参与评论您还未登录，请先登录后发表或查看评论

html静态前端计算器页面

08-17

简单的html与scc代码做个静态的计算器，喜欢的朋友可以参考，背景图片来源网络竟提供参考

通过HTML，js，css设计计算器

qq_50563889的博客

03-28

215

计算机的设计使用HTML，js，css 以盖房子类比，必须定义这个房子有多长、多宽，每一块面积如何规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室。将这些定义好，网页也就有了最基本的样子。总之，HTML 就是用来布局网页中的每一个元素的。 CSS 中的“样式”就是指外观。还以盖房为例，定义好了各个空间，房子也盖起来了，但还要装修，例如给客厅贴壁纸、给卧室铺地板。CSS 就是起装修作用的，要和 HTML —起配合使用。 JavaScript 是一种脚本语言，它在网页中的作用是控制 HTML 中的每一个元

JavaScript项目组成部分：JavaScript制作简易计算器及制作原理

最新发布

qq_52530691的博客

07-02

520

JavaScript项目组成部分：JavaScript制作简易计算器及制作原理

html和css编译计算器页面,html+css+js 实现计算器

weixin_42512249的博客

06-10

377

用带道术用量确示常构端析以要效开的用，近不JavaScript制作一个计算器，可以进行加、减、乘除、指数、根号、括号运算要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标。功能上用，事少来最差端在事路原们这制码效移，动较难实现的是指数与根号运算，但在算法实现上两者其实大同朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏小异。一种方案是朋不功事做时次...

css 背景效果_软件技术：我写CSS的常用套路(附demo的效果实现与源码）

weixin_39577908的博客

11-20

627

前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...

用HTML，CSS，JS制作一个网页计算器

ilikeu777的博客

03-27

3274

今天分享一个自己做的网页计算器，我个人感觉，虽然不精简，但是应该涉及到的东西都有了，所以分享出来，那我直接上代码了。 <html> <head> <meta charset="utf-8"> <title>我的计算器</title> <script src="jquery-1.9.1.min.js"></script> <script> function myck(

使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序

热门推荐

努力是为了站在万人之中，成为别人的光

07-25

4万+

今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源第 2 步 - 从 index.html 开始第 3 步 - 设置索引文件的样式第 4 步 - 获取 Weather API 和 Unsplash API 密钥第 5 步 - 从 JavaScript 编码开始第 6 步 - 免费托管您的网站！

web前端期末结课大作业 html+css+javascript网页设计实例企业网站制作

11-15

期末结课大作业 html+css+javascript网页设计实例企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习

基于html+css+js实现简易计算器代码实例

10-15

主要介绍了基于html+css+js实现简易计算器代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

使用js,css,html实现的网页计算器

07-01

使用javascript,css，html实现的网页计算器，入门级别的代码，适合初学者学习与巩固，代码注释非常详细，还有说明文档。

HTML5实现网页计算器

08-18

这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮

简易计算器页面

weixin_30703911的博客

07-29

115

Calculator.jsp： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.ge...

用HTML,CSS,JS实现简单的计算器网页

qq_45852612的博客

03-23

5335

爷爷!!!,你关注的UP主终于更新了!!! 首先来简单解释一下什么是HTML,CSS,JS 1.HTML HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。 2.CSS 中文翻译为“层叠样式表”,主要功能是定义网页数据的编排、显示、格式化及特殊效果，它扩展了HTML的功能。 3.JS JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。 计算器 下面是

纯 HTML+CSS+JavaScript 编写的计算器应用

weixin_34259559的博客

09-22

481

一道笔试题之前偶然看到一个公司的笔试题，题目如下：用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 具体要求：有且只有一个文件：index.html。不允许再有其他文件，不允许再有单独的CSS、JS、PNG、JPG文件。运行环境为 Google Chrome。必须支持标准的四则运算。例如：1+2...

经典网页设计：25个华丽的 CSS 网站作品案例

weixin_34402090的博客

06-13

980

　　CSS 是网页设计师和网页开发人员最喜欢的技术之一，因为它有大量新特性、新元素和新技术。创建一个基本的布局可能并不需要很多的时间或精力。但是，如果你想让您的设计脱颖而出，那么就真的需要花费一番功夫。今天，我向大家分享25个屡获殊荣的 CSS 网站设计案例。您可能感兴趣的相关文章 10套精美的免费网站后台管理系统模板 35个立体动感的视差滚动效果网站作品 10个精美的 HTML...

Web前端开发面试技巧：HTML、CSS和JavaScript知识点总结

本文档总结了 Web 前端开发面试中的常见问题和答案，涵盖了 HTML、CSS、JavaScript 等多方面的知识点。 **基础知识** 1. W3C 标准：W3C 是 WorldWideWeb Consortium 的缩写，中文是 W3C 组织或者万维网联盟。W3C ...

【前端】HTML和CSS案例 计算器页面效果（起点闭关计划）

【前端】HTML和CSS案例计算器页面效果（起点闭关计划）