使用到的：
下载HBuilder
链接：
https://pan.baidu.com/s/1753wjCiiahe92LRMIVjYag
提取码：fu0e
下载Bootstrap
链接：https://pan.baidu.com/s/1VpstcNziMhmEJ-aqvCJKZw
提取码：be8h
参考学习网站：菜鸟教程 https://www.runoob.com
1.文件→新建→Web项目
2.在电脑上选择一个图片 复制粘贴到 img
最好是png格式，便于之后转为手机APP，手机APP上只可显示png格式图片。
3.将解压出来的Bootstrap文件夹中的3个文件复制粘贴到 js
4.双击打开index.html
开始编程！
注意：1.输入某单词的前几个字母后软件会自动提示你所需要的内容，只需按Enter键即可快速选择，节省时间
2.点击
或 Ctrl+r 可在浏览器中预览效果
3.Ctrl+s 快捷保存
输入“个人社保计算器”设置网站标题
<title>个人社保计算器</title>
添加Bootstrap框架
<script src="jquery.min.js"></script> <script src="bootstrap.min.js" ></script> <link rel="stylesheet" href="bootstrap.min.css" />
添加图片
<div class="mypic"> <img class="img-circle" src="img/0979b051f8198618a9e676a842ed2e738ad4e6d8.jpg" width="100px" height="100px" /> </div>
div表示“块”
img-circle将图片设置为圆形
width height设置图片的长宽
在head部分加入
<style> .mypic{ margin: 0 auto; text-align: center; margin-bottom: 20px; margin-top: 20px; } </style>
使图片居中，且上下空出一部分（也可在body部分使用<p></p>空行）
添加表格：
table表示表格
表格样式：边框 居中
<table class="table table-bordered text-center">
<tr>表示表格的行<td>表示表格的列
<tr> <td >工资</td> <td colspan="3"><input class="form-control" placeholder="请输入个人工资" id="sal"</td> <td><button class="btn btn-danger btn-block">计算</button></td> </tr>
colspan 合并单元格
input 输入框 placeholder 占位文字
btn 按钮 button 的简写
……
后几行略
添加版权信息：
<div class="text-center"><small>中北大学电气工程及其自动化专业 2020/3/8</small></div>
text-center 文本居中
<small></small>文本缩小
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>个人社保计算器</title> <script src="jquery.min.js"></script> <script src="bootstrap.min.js" ></script> <link rel="stylesheet" href="bootstrap.min.css" /> <style> .mypic{ margin: 0 auto; text-align: center; margin-bottom: 20px; margin-top: 20px; } </style> </head> <body> <div class="mypic"> <img class="img-circle" src="img/0979b051f8198618a9e676a842ed2e738ad4e6d8.jpg" width="100px" height="100px" /> </div> <p></p> <div> <table class="table table-bordered text-center"> <tr> <td >工资</td> <td colspan="3"><input class="form-control" placeholder="请输入个人工资" id="sal"</td> <td><button class="btn btn-danger btn-block">计算</button></td> </tr> <tr class="bg-primary"> <td>险种</td> <td>个人%</td> <td>个人</td> <td>公司%</td> <td>公司</td> </tr> <tr> <td>养老</td> <td>8%</td> <td id="ylgr"></td> <td>20%</td> <td id="ylgs"></td> </tr> <tr> <td>医疗</td> <td>2%</td> <td id="ybgr"></td> <td>8%</td> <td id="ybgs"></td> </tr> <tr> <td>失业</td> <td>0.5%</td> <td id="sygr"</td> <td>1.5%</td> <td id="sygs"></td> </tr> <tr> <td>工伤</td> <td></td> <td></td> <td>0.5%</td> <td id="gsgs"></td> </tr> <tr> <td>生育</td> <td></td> <td></td> <td>0.8%</td> <td id="sygs"></td> </tr> <tr> <td>公积金</td> <td>12%</td> <td id="gjjgr"></td> <td>12%</td> <td id="gjjgs"></td> </tr> <tr> <td>合计</td> <td id="grhj">个人合计</td> <td></td> <td>公司合计</td> <td id="gshj"></td> </tr> <tr> <td>总额</td> <td colspan="4" id="total"></td> </tr> </table> </div> <div class="text-center"><small>中北大学电气工程及其自动化专业 2020/3/8</small></div> </body> </html>
原文：https://www.cnblogs.com/shenlan99/p/12452383.html