CSS 后台布局实例

下面的例子是一个简单的布局

最上面是header，左边是一个logo（老男孩），右边是用户的登录信息

中间一大块是内容，内容左侧是菜单，右侧是具体的内容

代码如下：

body的margin为0，确保边上全部填满

absolute 确保位置不变; 注意如果他的父级标签有relative，他相对于这个父级标签的位置不变，否则相对于body的位置不变

overflow 在内容超过标签范围之后会自动加个滚轮

font-awesome插件可以使用现成的小标签

                                    
    
    老男孩    
    
                
    我的资料    注销    
    
    
        5     
    
        
    
    
    
a
    
            
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
asdf
asdf
asdf
asdf
asdf
    
    
    
    
        

效果如下