UI菜鸟，请教问题_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

谁能刚告诉我这个页面怎么做的吗？用asp.net

回复讨论(解决方案)

有人么？请教了。。。

帮我做一个小模块就行了。。非常感谢。。

都没人么？伤心了。。。

来人啊。。帮帮忙吧。。谢谢。。

各位大虾谢谢了。。

去ASP栏块去问！

自己学习，这个不难~

多选文本框

以前只能三连回，现在改了？

我只记得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>

로그인 후 복사