以关注页面为例：
html:
1 <div class="row"> 2 3 <div class="col-md-12 col-sm-12 col-xs-12"> 4 <div class="x_panel" style="margin-top: 0px; padding-top: 0px;"> 5 <div class="x_title"> 6 <!--本页图标--> 7 <div class="btn-group"> 8 <a href="/task_mgm/taskinfo_finished" style="font-size: 28px; padding-bottom: 5px"><i 9 class="fa fa-home" style="padding-top: 4px"></i> </a> 10 </div> 11 <!--与我相关--> 12 <div class="btn-group" style="margin-left: 4px"> 13 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 14 style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">与我相关 15 </button> 16 </button> 17 <ul class="dropdown-menu" id="select_task1" role="menu"> 18 <li id="create_mine"><a href="#">我创建的任务</a> 19 </li> 20 <li id="res_mine"><a href="#">我负责的任务</a> 21 </li> 22 <li id="exe_mine"><a href="#">我参与的任务</a> 23 </li> 24 <li class="divider"></li> 25 </ul> 26 </div> 27 <!--到期时间--> 28 <div class="btn-group"> 29 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">到期时间</button></button> 30 <ul class="dropdown-menu" id="select_task2" role="menu"> 31 <li style=""> 32 <lable style="margin-left: 10px">从：</lable> 33 <input type="text" id="rz1" class="calendar-control select_input4" style="width: 140px; margin-left: 8px;" autocomplete="off"></li> 34 </li> 35 <li style=""> 36 <lable style="margin-left: 10px">到：</lable> 37 <input type="text" id="rz2" class="calendar-control select_input5" style="width: 140px; margin-left: 8px;" autocomplete="off"></li> 38 </li> 39 <input id="sub_date" type="button" style="float: right; margin: 2px 8px 5px" value=" 确 定 "> 40 </ul> 41 </div> 42 <!--任务进度--> 43 <div class="btn-group"> 44 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 45 style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">任务进度 46 </button> 47 </button> 48 <ul class="dropdown-menu" id="task_advance" role="menu"> 49 <li id="advance_0"><a href="#"> 0%</a> 50 </li> 51 <li id="advance_2"><a href="#"> 20%</a> 52 </li> 53 <li id="advance_4"><a href="#"> 40%</a> 54 </li> 55 <li id="advance_6"><a href="#"> 60%</a> 56 </li> 57 <li id="advance_8"><a href="#"> 80%</a> 58 </li> 59 <li id="advance_10"><a href="#"> 100%</a> 60 </li> 61 <li class="divider"></li> 62 </ul> 63 </div> 64 <!--更多--> 65 <div class="btn-group"> 66 <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">筛 选</button> 67 68 <ul class="dropdown-menu" id="select_task3" role="menu"> 69 <li style="text-align: center"><input type="text" class="select_input1" placeholder="按创建人筛选" style="border: #FFFFFF; margin-top: 6px"> 70 </li> 71 <li style="text-align: center"><input type="text" class="select_input2" placeholder="按负责人筛选" style="border: #FFFFFF; margin-top: 3px"> 72 </li> 73 <li style="text-align: center"><input type="text" class="select_input3" placeholder="按参与人筛选" style="border: #FFFFFF; margin-top: 3px"> 74 </li> 75 <li class="divider"></li> 76 </ul> 77 </div> 78 <div class="clearfix"></div> 79 </div> 80 <div class="x_content"> 81 <table id="datatable-buttonss" class="table table-hover bulk_action" style="width:100%"> 82 <thead> 83 <tr> 84 <th>id</th> 85 <th></th> 86 <th>任务名称</th> 87 <th>紧急程度</th> 88 <th> 进度</th> 89 <th>创建人</th> 90 <th>责任人</th> 91 <th>参与人</th> 92 <th style="text-align: center">状态</th> 93 <th>更新时间</th> 94 </tr> 95 </thead> 96 <tbody> 97 </tbody> 98 </table> 99 </div> 100 </div> 101 </div> 102 103 </div>