左侧菜单

最新推荐文章于 2022-10-04 20:46:13 发布

weibing999

最新推荐文章于 2022-10-04 20:46:13 发布

阅读量372

点赞数

分类专栏： css HTML 5

本文链接：https://blog.csdn.net/weibing999/article/details/54693289

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML 5

4 篇文章 0 订阅

订阅专栏

html 结构

</div>

css样式

.leftnav{ background:#252525; width:180px; height:100%; position:absolute; bottom:0px; left:0px; top:0px; z-index:11;}
.leftnav_cont{ background:#252525;}
.panel-group{ background:#252525;}
.panel,.panel-default>.panel-heading{ background:none !important; color:#fff; text-align:center;}
.panel-heading{ border-top-left-radius: 0px; border-top-right-radius: 0px;}
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>
.list-group { border-top: 1px solid #2c2c2c;}
.panel-default { border-color: #2c2c2c;}
.panel-title>a,.panel-body a { color: #ababab;}

.tabnav-ico{ margin-right:6px; display:inline-block;}
.panel-body a{ display:block; padding:6px;}
.N_in{ color:#f4f7fa;}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>shaoniangong</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script>
function openLink(linktype){
    var pagePath = null;
	if(linktype!=null){
		if(linktype=="baomingdengji")
		{
			pagePath = "baomingdengji.html"; 		
		}else if(linktype=="baobiaotongji"){
			pagePath = "baobiaotongji.html"; 
		}else if(linktype=="shujuweihu"){
		    pagePath = "shujuweihu.html"; 
		}else if(linktype=="xitongweihu"){
		    pagePath = "xitongweihu.html"; 
		}
	}
	if(pagePath!=null){
	    var mainFrame = document.getElementById("mainFrame");
		if(mainFrame!=null)
	    {
			mainFrame.src = pagePath;
		}
	}
}
</script>
</head>

<body>
<header>
    <img class="img-responsive pull-left" src="images/logo.png" alt="Responsive image">
    <div class="lb pull-right"><span>欢迎<a class="S_user" href="#">admin</a></span><a href="#"><img class="pull-right" src="images/close.png"></a></div>
</header>

<div class="container-fluid main">
  <div class="leftnav">
    <div class="leftnav_cont panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bam_ico1.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne" οnclick="openLink('baomingdengji')">报名登记</a> </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body"></div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bb_ico2.png" alt="Responsive image"></i><a class="on" data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo" οnclick="openLink('baobiaotongji')"> 报表统计 </a> </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
          <div class="panel-body"> <a class="on" href="#">班级报表</a> <a href="#">课程报表</a> <a href="#">费用报表</a> </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bsj_ico3.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree" οnclick="openLink('shujuweihu')"> 数据维护</a> </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body"> </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"><i class="tabnav-ico"><img class="img-responsive" src="images/bxt_ico4.png" alt="Responsive image"></i><a data-toggle="collapse" data-parent="#accordion"  href="#collapseThree" οnclick="openLink('xitongweihu')">系统维护</a> </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
          <div class="panel-body"> </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="con_r">
    <iframe id="mainFrame" name="mainFrame" src="" noresize="" scrolling="no"rows="*"></iframe>
    <div class="footer">
      <p>安徽时旭智能科技有限公司版权所有</p>
    </div>
  </div>
</div>

<!-- 可选的Bootstrap主题文件（一般不使用） --> 
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> 

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>