问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

简单计算器

创作时间:
作者:
@小白创作中心

简单计算器

引用
CSDN
1.
https://blog.csdn.net/c__z__m/article/details/145474794

本文将介绍如何使用HTML和CSS制作一个简单的计算器。通过本文，你将学习到HTML文档的基本结构、元数据设置、样式定义以及计算器功能的实现。适合有一定前端基础的读者学习参考。

1. 文件结构和基本信息

  • <!DOCTYPE html>：这是 HTML5 的文档类型声明，告知浏览器该文档使用 HTML5 标准进行解析。
  • <html lang="zh-CN">：HTML 文档的根元素，lang属性指定文档的语言为中文（简体）。

2. <head> 部分

  • 元数据：
  • <meta charset="UTF-8">：指定文档的字符编码为 UTF-8，确保能够正确显示各种字符。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在不同设备上能够自适应显示，宽度等于设备宽度，初始缩放比例为 1.0。
  • 标题：
  • <title>简单计算器</title>：设置页面的标题，显示在浏览器的标题栏中。
  • 样式：
  • 使用<style>标签定义了页面的样式，主要包括：
  • body：设置了页面的字体、布局（使用flex布局实现水平和垂直居中）、背景颜色等。
  • .calculator：定义了计算器容器的样式，包括背景颜色、内边距、边框圆角、阴影等。
  • .calculator input：设置计算器输入框的样式，如宽度、内边距、字体大小等。
  • .calculator button：设置计算器按钮的样式，包括宽度、内边距、字体大小、背景颜色、鼠标指针样式等。
  • .calculator button:hover：定义按钮鼠标悬停时的背景颜色变化。
  • @media (max-width: 600px)：媒体查询，当屏幕宽度小于等于 600px 时，调整按钮和输入框的字体大小和内边距。
  • .row：定义行的样式，使用flex布局实现按钮的水平排列。

3. <body> 部分

  • 计算器容器：
  • <div class="calculator">：作为计算器的容器，包含输入框和按钮。
  • <input type="text" id="display" disabled>：输入框，用于显示计算结果和输入的数字及运算符，disabled属性防止用户直接编辑输入框内容。
热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号