web组件目录页

    xiaoxiao2022-07-06  195

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="public/content/css/font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> body{ margin: 0px; padding: 0px; } .zhezhao{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,1); width:100%; height: 100%; text-align: center; font-family: "微软雅黑"; } .table_box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:80%; height: 600px; background-color: white; margin:auto; padding: 0px!important; } .table_head{ width: 100%; height:50px; margin: 0px!important; padding: 0px!important; border-bottom: 1px solid #7AAD6D; line-height: 50px; font-size: 18px; letter-spacing: 2px; color: #30462A; } .table_menu{ position: absolute; left: 0px; width: 15%; height: 550px; background-color:white; padding: 10px; border-right: 1px solid #7AAD6D; text-align: left; } .panel{ border: none; box-shadow: none; /*background-color: #C1DCC1;*/ border-radius: 2px!important; } .panel-heading{ padding:3px; margin: 0px; text-decoration: none; } .panel-heading a,.panel-heading a:hover,.panel-heading a:active{ text-decoration: none; } .panel-body{ text-align: left; padding:0px!important; margin: 0px!important; } .panel-body ul{ list-style:none; padding-left:20px; margin: 0px; } .panel-body ul>li{ } </style> </head> <body> <div id="" class="zhezhao"> <div class="table_box container"> <div class="table_head row"> xxxxxxxxx </div> <div class="row"> <!--左侧--> <div class="table_menu col-md-2"> <div class="panel"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#menu_1"> <i class="fa fa-folder-o"></i> 文件夹 </a> </h4> </div> <div id="menu_1" class="panel-collapse collapse"> <div class="panel-body"> <ul> <li><i class="fa fa-file-o"></i>  1.文件1</li> <li><i class="fa fa-file-o"></i>  2.文件2</li> </ul> </div> </div> </div> </div> <!--右侧--> <div class="col-md-10"> </div> </div> </div> </div> </body>
    最新回复(0)