Heim > Artikel > Web-Frontend > UI菜鸟，请教问题_html/css_WEB-ITnose
UI菜鸟，请教问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:461138Durchsuche
谁能刚告诉我这个页面怎么做的吗？用asp.net
回复讨论(解决方案)
有人么？请教了。。。
帮我做一个小模块就行了。。非常感谢。。
都没人么？伤心了。。。
来人啊。。帮帮忙吧。。谢谢。。
各位大虾谢谢了。。
去ASP栏块去问！
自己学习，这个不难~
多选文本框
以前只能三连回，现在改了？
我只记得table的布局：一个大的table嵌套三个小的table，table中有三列，每一列右对齐;至于复选框就是复选框属性值为true。
我只记得table的布局：一个大的table嵌套三个小的table，table中有三列，每一列右对齐;至于复选框就是复选框属性值为true。
楼主，我用div+css+jQuery帮你实现了，希望对你有所帮助，运行的时候，记得导入jQuery的js文件，以下是代码：
样式文件css.css
.mainContent { position: absolute; top: 50px; left: 245px; right: 245px; bottom: 50px; overflow: auto;}.topContent{ position: absolute; top: 5px; left: 5px; right: 5px; height: 28px; background: url(../images/bg.png);}.leftTitle{ position: relative; top: 2px; left: 10px; padding: 5px; font: 12px "宋体";}.rightCheck{ position: relative; top: 5px; left: 0px; padding: 2px;}.middleBuyContent{ position: absolute; top: 35px; left: 5px; right: 5px; height: 165px;}.leftTd{ font: 12px "宋体"; float: right; padding: 5px; text-align: right;}.rightTd{ float: right; padding: 2px; text-align: left; margin-right: 20px;}.middleSellContent{ position: absolute; top: 185px; left: 5px; right: 5px; height: 28px; background: url(../images/bg.png);}.middleSellInfoContent{ position: absolute; top: 215px; left: 5px; right: 5px; height: 165px;}.bottomContent{ position: absolute; top: 370px; left: 5px; right: 5px; height: 28px; background: url(../images/bg.png);}.bottomBoxInfoContent{ position: absolute; top: 400px; left: 5px; right: 5px; height: 80px;} js文件：operaation.js
$(function(){ //采购权限 $("#buyRule").click(function(){ //获取该div下的复选框的个数 var v = $("#buyRuleTable").find(":checkbox").size(); var flag = $(this).get(0).checked; if(flag){ for(var i = 0;i < v;i++){ $("#buyRuleTable").find(":checkbox").get(i).checked = true; } }else{ for(var i = 0;i < v;i++){ $("#buyRuleTable").find(":checkbox").get(i).checked = false; } } }); //销售权限 $("#sellRule").click(function(){ //获取该div下的复选框的个数 var v = $("#sellRuleTable").find(":checkbox").size(); var flag = $(this).get(0).checked; if(flag){ for(var i = 0;i < v;i++){ $("#sellRuleTable").find(":checkbox").get(i).checked = true; } }else{ for(var i = 0;i < v;i++){ $("#sellRuleTable").find(":checkbox").get(i).checked = false; } } }); //仓库管理 $("#boxRule").click(function(){ //获取该div下的复选框的个数 var v = $("#boxRuleTable").find(":checkbox").size(); var flag = $(this).get(0).checked; if(flag){ for(var i = 0;i < v;i++){ $("#boxRuleTable").find(":checkbox").get(i).checked = true; } }else{ for(var i = 0;i < v;i++){ $("#boxRuleTable").find(":checkbox").get(i).checked = false; } } }); }) html文件如下：index.html
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>netone</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/operaation.js"></script> </head> <body> <div class="mainContent"> <div class="topContent"> <span class="leftTitle">采购权限</span> <span class="rightCheck"><input type="checkbox" id="buyRule"/></span> </div> <div class="middleBuyContent"> <table border="0" width="100%" id="buyRuleTable"> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增采购单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改采购单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除采购单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览采购单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览退货单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品采购汇总表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品采购明细表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">供应商采购汇总表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">采购订单完成情况</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增采购订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">编辑采购订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除采购订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览采购订单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">审核采购订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">反审采购订单</div></td> <td></td> <td></td> </tr> </table> </div> <div class="middleSellContent"> <span class="leftTitle">销售权限</span> <span class="rightCheck"><input type="checkbox" id="sellRule"/></span> </div> <div class="middleSellInfoContent"> <table border="0" width="100%" id="sellRuleTable"> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增销售单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改销售单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除销售单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览销售单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除退货单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览退货单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品销售汇总表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">物品销售明细表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">客户销售汇总表</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">销售订单完成情况</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增销售订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">编辑销售订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除销售订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览销售订单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">审核销售订单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">反审销售订单</div></td> <td></td> <td></td> </tr> </table> </div> <div class="bottomContent"> <span class="leftTitle">库存管理</span> <span class="rightCheck"><input type="checkbox" id="boxRule"/></span> </div> <div class="bottomBoxInfoContent"> <table border="0" width="100%" id="boxRuleTable"> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增入库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改入库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除入库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览入库单</div></td> </tr> <tr> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">新增出库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">修改出库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">删除出库单</div></td> <td><div class="rightTd"><input type="checkbox" /></div><div class="leftTd">浏览出库单</div></td> </tr> </table> </div> </div> </body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：上传文件路径的问题_html/css_WEB-ITnoseNächster Artikel：HTML 高度太大，包含的图片显示不正常。_html/css_WEB-ITnose