python:页面布局 后台管理页面之常用布局

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title> <style>
body{
margin: 0px;
}
.head{
height: 48px;
background-color: #204982;
}
.content .con_menu{ background-color: red;
top:48px;
left: 0;
bottom: 0;
width: 200px;
position: absolute;
}
.content .con_content{ top:48px;
left:200px;
bottom: 0;
right: 0; position: absolute;
overflow: auto;
}
.left{
float:left;
}
.right{
float: right;
}
</style>
</head>
<body>
<!--后台管理页面---左侧不跟着右侧滚动 overflow: auto;-->
<!--头-->
<div class="head"></div> <!--内容-->
<div class="content" > <div class="con_menu left">b</div>
<div class="con_content left" >
<div style="background-color: darkgreen; " >
<p style="margin: 0">abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
<p>abd</p>
</div>
</div>
</div>
<!--底部-->
<div class="foot"></div> </body>
</html>

后台管理页面之常用布局

上一篇:centos7安装MongoDB3.4


下一篇:Croppic – 免费开源的 jQuery 图片裁剪插件