一个很简易的计算器-阿里云开发者社区

一个很简易的计算器

2023-02-16 72

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一个很简易的计算器

学习目标

掌握表格相关标记的使用方法；

掌握HTML文档结构，学会编写简单的HTML程序；

熟悉使用table进行页面布局的方法。

学习内容

利用Table完成CASIO计算器的外观设计。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="class.css" /><!--外部样式表链接-->
  <style>
  img{width:90px;height:30px;}
    </style>
    </head>
  <body>
    <div style="background-color: yellow;width: 402px;" >
            <table id="tab0" borderframe=void width="100%" height="40" align="left">
                <tr><td align="left"><img src="photo.jpg"></td>
                </tr>
      <table id="tab" border="1" width="400px" height="400px">
                <tr>
          <th bgcolor="white" colspan="4"></th>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>+</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>-</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>*</td>
        </tr>
        <tr>
          <td>0</td>
          <td>+</td>
          <td>CE</td>
          <td>/</td>
        </tr>
    </table>
    </table>
    </div>
  </body>
</html>

CSS

#tab tr td{
  text-align: center;    
}
#tab tr th{
  text-align:left;    
    height: 60px;
}
#tab{table-layout: fixed;
background-color: yellow;
border-spacing: 20px 20px;
}
#img{vertical-align:text-bottom;}

一个很简易的计算器

学习目标

学习内容

html

CSS

结果展示

热门文章

最新文章

相关电子书