前端整理-一个能画出的页面

1.jsp中引入时间My97时间控间

<script type="text/javascript"  src="static/js/My97DatePicker/WdatePicker.js"></script>

2.<link href="static/css/bootstrap.min1.css" rel="stylesheet" />        rel=stylesheet的意思是告诉浏览器你link过来的是一个样式

页面头引入内容

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%

  String path = request.getContextPath();

  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

输入框与顶框的距离设置：

（1）<hr style="height:1px;border:none;border-top:1px groove ghostwhite;">

效果：

（2）<br>

 

表单格式

(1).流式布局:

<link href="static/css/bootstrap.min.css" rel="stylesheet"/>

<script src='static/js/jquery-2.1.3.min.js'></script>

<script src='static/My97DatePicker/WdatePicker.js'></script>

<script type="text/javascript"src="static/js/bootstrap-datepicker.min.js"></script>

 

 

<div style="width:2000px">

<hr style="height:1px;border:none;border-top:1px groove ghostwhite;">

<form  method="/cuijimanage/add.do" id="form" name="form">

<div style="height:30px;width:1700px;margin-left:20px;">

            <div class="pull-left search " style="margin-left:5px;">

            <label class="input-group-addon">编号：</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

            <input style="width:150px;height:30px;height:15px"type="text" class="form-control"

                       name="callLoanNidOver" id="callLoanNidOver1"/>

            </div>

            <div class="pull-left search " style="margin-left:5px;">

            <label class="input-group-addon">编号：</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

            <input style="width:150px;height:30px;height:15px"type="text" class="form-control"

                       name="callLoanNidOver" id="callLoanNidOver1"/>

            </div>

            <div class="pull-left search " style="margin-left:5px;">

            <label class="input-group-addon">编号：</label>

            </div>

            <div class="pull-left search" style="margin-left:20px;">

            <input style="width:150px;height:15px;height:15px"type="text" class="form-control"

                       name="callLoanNidOver" id="callLoanNidOver1"/>

            </div>

             <div class="pull-left search " style="text-align:center;margin-left:10px;">

                <label class="">逾期金额:</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

                <input class="form-control" style="width:80px;height:20px;display:inline"type="text"

                       name="overdueAmountMin" id="overdueAmountMin1">-

                <input class="form-control" style="width:80px;height:20px;display:inline"type="text"

                       name="overdueAmountMax" id="overdueAmountMax1">

            </div>

            <div class="pull-left search " style="text-align:center;margin-left:10px;">

                <label class="">逾期阶段:</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

                <select class="form-control " name="overdueDuration" id="overdueDuration1"

                        style="font-size:15px;padding:2px 3px;color:#000;width:125px;">

                    <option value="0">不限</option>

                    <option value="S1">S1</option>

                    <option value="S2">S2</option>

                    <option value="S2+">S2+</option>

                    <option value="M1">M1</option>

                    <option value="M2">M2</option>

                    <option value="M3">M3</option>

                    <option value="M3+">M3+</option>

                </select>

            </div>

            <div class="pull-left search " style="text-align:center;margin-left:10px;">

                <label class="">结果:</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

                <select class="form-control " name="callResult" id="callResult1"

                        style="font-size:15px;padding:2px 3px;color:#000;width:125px;">

                    <option value="-1">不限</option>

                    <option value="0">已还清</option>

                    <option value="1">承诺还款</option>

                    <option value="2">客户死亡</option>

                </select>

            </div>

            <div class="pull-left search " style="text-align:center;margin-left:10px;">

                <label class="">分派时间:</label>

            </div>

                 

            <div class="pull-left search" style="margin-left:10px;">

                <input class="form-control date-picker" data-date-format="yyyy-mm-dd"

                       style="width:100px;height:20px;display:inline"type="text" name="callTimeMin" id="callTimeMin1">-

                <input class="form-control date-picker" data-date-format="yyyy-mm-dd"

                       style="width:100px;height:20px;display:inline"type="text" name="callTimeMax" id="callTimeMax1">

            </div>

            <br>

            <div class="pull-left search" style="text-align:center;margin-left:10px;">

            <label class="">结案时间：</label>

            </div>

            <div class="pull-left search" style="margin-left:10px;">

               <input type="text" id="endCaseDateOverMin1" style="width:150px;height:30px;height:15px"name="endCaseDateOverMin" 

                     onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" style="width:300px" />-

               <input type="text" id="endCaseDateOverMax1" style="width:150px;height:30px;height:15px"name="endCaseDateOverMax" 

                     onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" style="width:300px" />

            </div>

            <br>

    <div style="text-align:left;margin-top:10px;width:450px"align="right">

             

        <button id="chaxun" class="btn btn-primary" onclick="chaxun()">查询</button>      

        <button id="clear" class="btn btn-primary" onclick="clean()">清空</button>      

        <button id="biaoji" class="btn btn-primary" onclick="biaoji()">标记</button>

<button id="chaxun" class="btn btn-primary" onclick="chaxun()">查询</button>     //按钮框是大框
 <button id="chaxun" class="btn btn-primary btn-small" οnclick="chaxun()">查询</button> //按钮框是小框

    </div>

          </div>

</form>

</div>

 

（2）高版本bootstrap的表单

<script src='static/js/jquery-3.2.1.min.js'></script>

<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src='static/bootstrap-3.3.7-dist/js/bootstrap.min.js'></script>

<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script>

 

 

<div style="width:1800px">

<hr style="height:1px;border:none;border-top:1px groove ghostwhite;">

<form class="form-inline">

  <div class="form-group">

    <label for="exampleInputName2">人员姓名</label>

    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

  </div>

  <div class="form-group">

    <label for="exampleInputEmail2">Email</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

  </div>

  <div class="form-group">

    <label for="exampleInputName2">人员姓名</label>

    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

  </div>

  <div class="form-group">

    <label for="exampleInputEmail2">Email</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

  </div>

  <div class="form-group">

    <label for="exampleInputName2">人员姓名</label>

    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

  </div>

  <div class="form-group">

    <label for="exampleInputEmail2">Email</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

  </div>

  <div class="form-group">

    <label for="exampleInputName2">人员姓名</label>

    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

  </div>

  <div class="form-group">

    <label for="exampleInputName2">人员时间</label>

    <input class="form-control date-picker" data-date-format="yyyy-mm-dd"

                       style="width:195px;height:30px;display:inline"type="text" name="callTimeMin" id="callTimeMin1">

  </div>

  <div class="form-group">

    <label for="exampleInputEmail2">时间</label>

    <input type="text" id="endCaseDateOverMin1" style="width:150px;height:30px;height:30px"name="endCaseDateOverMin" 

                     onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" style="width:300px" />

  </div>

  <hr style="margin-height:1px;">

  <button id="chaxun" class="btn btn-primary" onclick="chaxun()">查询</button>      

  <button id="clear" class="btn btn-primary" onclick="clean()">清空</button>      

  <button id="biaoji" class="btn btn-primary" onclick="biaoji()">标记</button>

</form>

</div>

 

（3）列表展示端：

说明：table中的样式对bootstrap没有要求，高低版本都能显示，

<table class="table table-hover dataTable" border="1px" bordercolor="gainsboro" style="margin-left:20px;"

           width="2000px">

        <thead>

        <tr height="35px" align="center">

            <th width="4%" align="center"><input id="quanxuan" type="checkbox" onclick="quanxuan1()"

                                                 style="position:relative;opacity:100;"></th>

            <th width="7%">编号</th>

            <th width="5%">订单号</th>

            <th width="5%">借款人姓名</th>

            <th width="9%">借款人身份证</th>

            <th width="6%">手机号</th>

            <th width="7%">借款产品名称</th>

            <th width="4%">逾期期数</th>

            <th width="5%">

                <button id="overAmountOrd1" onclick="sortchaxunbyday('${sortFindByday}');"> 逾期天数</button>

            </th>

        </tr>

        </thead>

        <tbody>

        <c:forEach var="anjian" varStatus="var" items="${anjianlist }">

        <tr align="center" height="40px" <c:if test="${anjian.callMark==1}">bgcolor="red"</c:if>>

            <td align="center"><input id="${anjian.callLoanNid}" mark="${anjian.callMark}" name="callLoan"

                                      type="checkbox" style="position:relative;opacity:100;"></td>

            <td>

                <a href="cuijimanage/toDescPage.do?callLoanNid=${anjian.callLoanNid}&userId=${anjian.userId}&repaymentId=${anjian.repaymentId}"

                   style="color:blue">

                        ${anjian.callLoanNid}

                </a>

            </td>

            <td>${anjian.repaymentId}</td>

            <td>${anjian.realName}</td>

            <td>${anjian.contIdCard}</td>

            <td>${anjian.telephone}</td>

            <td>${anjian.productName}</td>

            <td>${anjian.period}/${anjian.periodTotal}</td>

            <td><fmt:formatDate value="${anjian.callTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>

            <td>

                <c:choose>

                    <c:when test="${anjian.callResult=='0'}"> 已还清</c:when>

                    <c:when test="${anjian.callResult=='1'}"> 承诺还款</c:when>

                    <c:otherwise>

                        ${anjian.callResult}

                    </c:otherwise>

                </c:choose>

            </td>

            <td>

                <c:if test="${anjian.callType==1}">电话</c:if>

                <c:if test="${anjian.callType==2}">网络</c:if>

            </td>

            <td>

                <fmt:formatDate value="${anjian.promiseRepaymentDay}" pattern="yyyy-MM-dd"/>

            </td>

            <td>

                <fmt:formatDate value="${anjian.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>

            </td>

            </c:forEach>

        </tbody>

    </table>