网页常见布局

　　　　　　　　　　　网页常见布局

 一、基础后台管理

　　　　1、基础布局

　　　　　　三块式，横标+左菜单+右内容

　　　　　　布局思路：不用float，用固定position，想到固定就是position，想到position就是fixed，relative和absolute。

　　　　　　　　　　　菜单盒子absolute 左边0,宽度固定，右边内容盒子左边=菜单盒子宽度+余出1-2px，右边0.

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>    
 9             body{
10                 margin:0;
11             }
12             .pghead{
13                 background-color:blue;
14                 width:100%;
15                 height:50px;
16                 color:white !important;
17             }
18             
19             .pgbody .menu{
20                 position:absolute;
21                 background-color:yellow;
22                 left:0;
23                 
24                 width:180px;
25                 color:white !important;
26             }
27             .pgbody .rtbody{
28                 position:absolute;
29                 background-color:pink;
30                 left:185px;
31                 right:0;
32                 
33                 color:white;
34             }
35         </style>
36     </head>
37     <body>
38         <div class="pghead">HHH            
39         </div>    
40         <div class="pgbody">
41             <div class="menu">
42                 <ul>
43                     <li>a</li>
44                     <li>a</li>
45                     <li>a</li>
46                     <li>a</li>
47                     <li>a</li>
48                     
49                 </ul>
50             </div>
51             <div class="rtbody">
52                 <h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
53             </div>
54         </div>
55     </body>
56 </html>
View Code

　　　　2、部分固定样式

　　　　　　三块式中，横标和左菜单不动，右内容可以用滚轮滚动。知识点：a）overflow：auto；b）使用强制滚轮时，一定将盒子上下左右全部固定。c）html>body>屏幕，fixed可以将盒子以屏幕为相对位置固定。而absolute在没有relative的情况下，可能是以当前屏幕为准，但是当屏幕滚动时，底部位置即变化。

 1 <!DOCTYPE html>
 2 <html lang = "en">
 3     <head>
 4         <meta charset = "utf-8">
 5         <meta name = "keyword" content = "liao">
 6         <meta name = "description" content = "lllll">
 7         <title>^ <> ^</title>
 8         <style>    
 9             body{
10                 margin:0;
11             }
12             .pghead{
13                 background-color:blue;
14                 
15                 height:50px;
16                 color:white;
17             }
18             
19             .pgbody .menu{
20                 position:absolute;
21                 background-color:yellow;
22                 left:0;
23                 
24                 width:180px;
25                 color:white ;
26             }
27             
28             .pgbody .rtbody{
29                 position:absolute;
30                 background-color:pink;
31                 top:50px;
32                 bottom:20px;
33                 overflow:auto;
34                 left:185px;
35                 right:0;
36                 color:white;
37             }
38         </style>
39     </head>
40     <body>
41         <div class="pghead">HHH            
42         </div>    
43         <div class="pgbody">
44             <div class="menu">
45                 <h1>0123</h1><h1>123</h1><h1>123</h1><h1>123</h>
46             </div>
47             <div class="rtbody">
48                 <h1>0123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
49             </div>
50         </div>
51     </body>
52 </html>
View Code

 

posted on 2016-08-14 21:58  lexn  阅读(122)  评论(0)  编辑  收藏  举报

导航