后台管理布局

最新推荐文章于 2023-08-19 11:41:38 发布
原创最新推荐文章于 2023-08-19 11:41:38 发布 · 551 阅读
2 ·
CC 4.0 BY-SA版权
web前端专栏收录该内容
20 篇文章
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
		<title>后台管理</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.nav{
				background-color: #FFFFFF;
				height:50px;
				min-width: 990px;
			}
			.nav .navleft{
				width: 199px;
				height: 50px;
				border-right: 1px solid #31B0D5;
			}
			.nav .navleft h3{
				font: 16px/50px 微软雅黑;
				margin: 0px;
				font-weight:bolder;
				text-align: center;
			}
			
			.nav .navright {
				position: absolute;
				top:0;
				left:200px;
				right: 0px;
				float: right;
			}
			
			
			.nav .navright .float{
				float: right;
				margin: 12px;
				text-decoration: none;
			}
			
			.nav .navright span{
				padding-right:3px ;
				
			}
			
			.nav .navright .nomargin {
				width: 40px;
				height: 40px;
				float: right;
                margin: 5px 10px 5px 10px; 		
                border-radius: 50%;		
                
			}
			
			.nav .navright .nomargin img{
				border-radius:50% ;   /* 设置圆形边框 */
				border: 3px solid ;    /* 设置边框 */
				width: 40px;
				height: 40px;
				float: right;
                margin: 5px 0px; 				
			}
			
			.nav .navright .img-box .info {
				position: absolute;
				top: 50px;
				right: 10px;
				z-index: 100;
				display: none;    /* 平常的时候隐藏 */
			}
			

			
			.nav .navright .img-box:hover .info{
				display: block;
				opacity: 0.8;		/* 设置透明度，透明度在[0,1]之间  */
			}				
			.nav .navright .img-box:hover .info a{    /*a标签是内联元素，不是块元素*/
				display: block;
				margin: 10px  0px;		
			}

						
			.left{
				width:199px;
				position: absolute;    /* left 开启了absolute,这里是相对于离它最近的开启了相对定位的元素,这里就是navright  */
				top: 50px;
				left: 0;
				bottom: 0;
				background-color:#EEEEEE;
				float: left;
				z-index: 99;
				
			}
	        .left a{
	        	display: block;
	        	text-decoration: none;
	        	padding: 10px;
	        	margin: 10px;
	        	text-align: center;
	        	border-bottom: 1px solid #000000;
	        }
			.content{				
				background-color: white;
				float: left;
				position: absolute;
				top: 50px;
				right: 0px;
				left: 200px;
				bottom: 0px;
				overflow: scroll;
				border-top: solid 1px #212121;
				z-index: 99;
			}
			
		</style>
		
	</head>
	<body>
		
		
		
		<div class="nav">
			<div class="navleft">
				<h3>后台管理界面</h3>
			</div>      
			
			<div class="navright">
				
				<div class="img-box">
					<img class='nomargin' src="img/12.jpg" />
					<div class="info">
						<a class='1' href="#">个人资料</a>
						<a class='2' href="#">注销</a>
					</div>
				</div>
				
				<a class='float' href="/"> <span class="glyphicon glyphicon-off" aria-hidden="true"></span> 登陆</a>	
				<a class='float' href="/"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>消息</a>
				<a class='float' href="/"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> 历史</a>
				<a class='float' href="/"><span class="glyphicon glyphicon-envelope" aria-hidden="true"> 邮箱</a>

			</div>
			
			
		</div>
		
		
		
		
		
		
		<div class="left">
			<a href="/"><i class="fa fa-users" style="margin-right: 10px;"></i>班级管理</a>
			<a href="#"><i class="fa fa-user-circle-o" style="margin-right: 10px;"></i>教师管理</a>
		</div>
		
		
		
		
		
		
		<div class="content">
			<ol class="breadcrumb">
			  <li><a href="#">首页</a></li>
			  <li><a href="#">学生管理</a></li>
			  <li class="active">教师管理</li>
			</ol>
			内容

		</div>
		
		
		
		
	</body>
</html>