Web开发笔记（1）

使用到的：

Chrome浏览器
HBuilder
Bootstrap框架

下载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 快捷保存

head部分

输入“个人社保计算器”设置网站标题

<title>个人社保计算器</title>

添加Bootstrap框架

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js" ></script>
<link rel="stylesheet" href="bootstrap.min.css" />

body部分

添加图片

<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>

预期效果：

操作步骤：

head部分

body部分

最终效果：

最终代码：

猜你喜欢