后台管理页面2种常用模板_html

一、常用后台管理布局:

1、实现效果图:(可拉动滚动条进行内容查看)

后台管理页面2种常用模板_html_第1张图片

 

代码:

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>后台页面布局title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             top:0;
10             right:0;
11             left: 0;
12             margin: 0;
13             background-color: royalblue;
14             color:white;
15             height: 48px;
16         }
17 
18         .menu{
19             background-color: slategray;
20             position: absolute;
21             left:0;
22             top:48px;
23             bottom: 0;
24             width:200px;
25 
26         }
27 
28         .content{
29             position: absolute;
30             right: 0;
31             top:48px;
32             bottom: 0;
33             left: 200px;
34             overflow: auto;
35         }
36     style>
37 
38 head>
39 <body>
40     <div class="pg-header">headerdiv>
41     <div class="pg-content">
42         <div class="menu">menudiv>
43         <div class="content">
44             <div style="background-color:#dddddd ">
45                 <p style="margin-top: 0">contentp><p>contentp><p>contentp><p>contentp>
46                 <p>contentp><p>contentp><p>contentp><p>contentp>
47                 <p>contentp><p>contentp><p>contentp><p>contentp>
48                 <p>contentp><p>contentp><p>contentp><p>contentp>
49                 <p>contentp><p>contentp><p>contentp><p>contentp>
50                 <p>contentp><p>contentp><p>contentp><p>contentp>
51                 <p>contentp><p>contentp><p>contentp><p>contentp>
52             div>
53         div>
54     div>
55 body>
56 html>
后台管理

 

 2、直接滑动到底部,不固定模块:

修改content样式:将overflow:auto删除

后台管理页面2种常用模板_html_第2张图片

 

 

实现效果:

后台管理页面2种常用模板_html_第3张图片

后台管理页面2种常用模板_html_第4张图片

 

你可能感兴趣的:(后台管理页面2种常用模板_html)