Css 实现遮罩层

    
    
    
    


    

    

    

        

            用户名：

            密　码：

            
            取消
        
    

    

        
        

            

                
LOGO
                
BANNER1
                
登录
            
            

            
菜单
        
        
        
        

            

                

                    
栏目一
                    
栏目二
                
                

                    
栏目三
                    
栏目四
                    
栏目五
                    
栏目六
                
            
             

                
栏目七
                
栏目八
                
栏目九
            
        
        
        

        
页脚
    

###style.css

/*预定义样式*/
body,ul,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
body{text-align:center;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.bg{background:#ccc;}

/*内容开始*/
.container{
    width:960px;
    margin:0 auto;
    /*border:1px solid red;*/
    overflow:hidden;
}

/* 头部开始 */
.logo{
    width:200px;
    height:80px;
}
.banner1{
    width:540px;
    height:80px;
    margin:0 10px;
}
.banner2{
    width:200px;
    height:80px;
}
.nav{
    height:30px;
    margin:10px 0;
}
/* 头部结束 */

/* 主体开始 */
.main-left{
    width:750px;
}
.main-left .big{
    width:368px;
    height:198px;
    border:1px solid #ccc;
}
.main-left .small{
    width:178px;
    height:198px;
    border:1px solid #ccc;
    margin-left:10px;
    margin-top:10px;
}
.main-right .aside{
    width:198px;
    height:128px;
    border:1px solid #ccc;
}
/* 主体结束 */
/* 尾巴开始 */
.footer{
    height:50px;
    margin-top:10px;
}
/* 尾巴结束 */
/*内容结束*/

转载于:https://my.oschina.net/phpweishunlong/blog/889737