Loading... ## 其它 1. 如果用Bootstrap,所有地方都用,建议不要混用 2. web前端要深学CSS 3. Java开发,对CSS要求不高 看《CSS权威指南》,CSS要学好,多临摹,要经验 4. 网页中图片位置为服务器相对路径/外链[图床] 大学学习=大学技术+公司技术+社会行业信息 5. c语言基础不足怎么办 学习《c Primer Plus》 5th --- ## 实战 <img src="https://www.xuegao-tzx.top/usr/themes/handsome/assets/img/emotion/aru/cheer.png" class="emotion-aru"> ### 一. Bootstrap表格 <div class="tip inlineBlock success"> 综合代码示例: </div> <div class="tip inlineBlock warning"> 这是head区的: </div> ```html <head> <meta charset="UTF-8"> <title>Bootstrap表格</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> ``` <div class="tip inlineBlock warning"> 这是body区的: </div> ```html <body> <div class="container"> <h1>主要示例</h1> <table class="table table-bordered text-center table-striped"> <tr> <td>编号</td> <td>名称</td> <td>说明</td> <td>详情</td> </tr> <tr> <td>1</td> <td>Java研发工程师</td> <td>开发大型管理系统</td> <td>经验越丰富,工资越高,8k~40k</td> </tr> <tr> <td>1</td> <td>C/C++研发工程师</td> <td>开发底层系统,算法</td> <td>经验越丰富,工资越高</td> </tr> <tr> <td>1</td> <td>web前端开发工程师</td> <td>开发纯前端</td> <td>经验越丰富,工资越高</td> </tr> </table> </div> </body> ``` --- ### 二.个人存款计算软件界面 <div class="tip inlineBlock success"> 综合代码示例: </div> <div class="tip inlineBlock warning"> 这是head区的: </div> ```html <head> <meta charset="UTF-8"> <title>个人存款计算软件界面</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> ``` <div class="tip inlineBlock warning"> 这是body区的: </div> ```html <body> <div class="container text-center"> <h1>个人存款计算</h1> <table class="table table-bordered text-center"> <tr class="bg-primary"> <td colspan="2">个人存款计算器</td> </tr> <tr> <td>存款金额</td> <td> <input class="form-control" type="text" id="shuru" placeholder="请输入存款金额"/> </td> </tr> <tr> <td>存款年限</td> <td> <select id="year" class="form-control"/> <option value="0.0175">1年(1.75%)</option> <option value="0.0225">2年(2.25%)</option> <option value="0.0275">3年(2.75%)</option> <option value="0.0275">5年(2.75%)</option> </select> </td> </tr> <tr> <td>所得利息</td> <td> <input class="form-control" type="text" id="jsde" readonly="readonly" /> </td> </tr> <tr> <td>本息合计</td> <td> <input class="form-control" type="text" id="total" readonly="readonly" /> </td> </tr> <tr> <td colspan="2"> <button class="btn-primary btn-block">计算</button> </td> </tr> </table> 开发者信息: 小草林 </div> </body> ``` --- ### 三. 个人社保计算器界面 <div class="tip inlineBlock success"> 综合代码示例: </div> <div class="tip inlineBlock warning"> 这是head区的: </div> ```html <head> <meta charset="UTF-8"> <title>个人社保计算器</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> ``` <div class="tip inlineBlock warning"> 这是body区的: </div> ```html <body> <div class="container text-center"> <img src="//www.xuegao-tzx.top/usr/uploads/auto_save_image/d20ca8cb6a76b1c2b3187edf0c691d1e.jpg" class="img-circle" width="100px"> <table class="table table-bordered text-center"> <tr> <td >工资</td> <td colspan="3"> <input type="text" id="salary" placeholder="请输入工资" class="form-control"> </td> <td> <button class="btn btn-block btn-danger">计算</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></td> <td>20%</td> <td></td> </tr> <tr> <td>医疗</td> <td>2%</td> <td></td> <td>6%</td> <td></td> </tr> <tr> <td>失业</td> <td>0.5%</td> <td></td> <td>1.5%</td> <td></td> </tr> <tr> <td>工商</td> <td></td> <td></td> <td>0.5%</td> <td></td> </tr> <tr> <td>生育</td> <td></td> <td></td> <td>0.8%</td> <td></td> </tr> <tr> <td>公积金</td> <td>12%</td> <td></td> <td>12%</td> <td></td> </tr> <tr> <td>合计</td> <td>个人合计</td> <td></td> <td>公司合计</td> <td></td> </tr> <tr> <td>总额</td> <td colspan="4"></td> </tr> </table> 开发者信息: 小草林 </div> </body> ``` 最后修改:2021 年 07 月 24 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏,谢谢
1 条评论
写得好好哟,我要给你点赞!