一. 简单web框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height: 48px; min-width: 1190px; background-color: #204d74; } .menus{ width: 200px; position: absolute; left: 0; bottom: 0; top: 48px; background-color: #269abc; } .content{ position: absolute; left: 200px; right: 0; top: 48px; bottom: 0; min-width: 990px; overflow: scroll; } </style> </head> <body> <div class="pg-header"> </div> <div class="pg-body"> <div class="menus">菜单</div> <div class="content">菜单 <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> <p>ppp</p> </div> </div> </body> </html>
二.常用web框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" /> <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" /> <link rel="stylesheet" href="/static/css/commons1.css"> {% block css %}{% endblock %} </head> <body> <div class="pg-header"> <div class="logo left">后台管理</div> <div class="avatar right" style="position: relative"> <img style=" 40px;height: 40px;" src="/static/images/1.jpg"> <div class="user-info"> <a>个人资料</a> <a>注销</a> </div> </div> <div class="rmenus right"> <a><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息</a> <a><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a> </div> </div> <div class="pg-body"> <div class="menus"> <a href="/manage/article-0-0-0.html"> <i class="fa fa-cogs" aria-hidden="true"></i> 文章管理</a> <a href="/manage/category/"> <i class="fa fa-cogs" aria-hidden="true"></i> 分类管理</a> <a href="/manage/tag/"> <i class="fa fa-cogs" aria-hidden="true"></i> 标签管理</a> <a href="/manage/selfinfo/"> <i class="fa fa-cogs" aria-hidden="true"></i> 个人信息</a> </div> <div class="content"> {% block xx %}{% endblock %} </div> </div> {% block js %}{% endblock %} </body> </html>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.hide{
display: none;
}
.pg-header{
height: 48px;
min- 1190px;
background-color: #204d74;
line-height: 48px;
}
.pg-header .logo{
color: white;
font-size: 18px;
200px;
text-align: center;
border-right: 1px solid #8a6d3b;
}
.pg-header .rmenus a{
display: inline-block;
padding: 0 15px;
color: white;
}
.pg-header .rmenus a:hover{
background-color: #269abc;
}
.pg-header .avatar{
padding: 0 20px;
}
.pg-header .avatar img{
border-radius: 50%;
}
.pg-header .avatar .user-info{
display: none;
background-color: white;
border: 1px solid #dddddd;
position: absolute; 200px;top: 48px;right: 2px;color: white;z-index: 100;
}
.pg-header .avatar:hover .user-info{
display: block;
}
.pg-header .avatar .user-info a{
display: block;
}
.menus{
200px;
position: absolute;
left: 0;
bottom: 0;
top: 48px;
border-right: 1px solid #dddddd;
background-color: white;
}
.content{
position: absolute;
left: 200px;
right: 0;
top: 48px;
bottom: 0;
min- 990px;
overflow: scroll;
z-index: 99;
}
.pg-body .menus a{
display: block;
padding: 10px 30px;
border-bottom: 1px dashed gray;
}
