可以灵活扩展的 DIV+CSS 框模型

从网站 http://dpwn.jobpartner.com/?404=Y 的布局上看到了这种框模型,觉得不错,于是自己弄了个,分享一下,也备自己随时调来重用哈哈。

Header
 
 
 
 
 

 

Header
 
 
 
 
 

 

Header
 
 
 
 
 

 

Header
 
 
 
 
 

CSS 源代码:

        #content p {
            text-indent: 2em;
        }
        
        #content h2 
        {
            font-weight: bold;
        }
        
        .catWrapper 
        {
            border: none;
            width: 400px;
            background-color: #336699;
            position: relative;
        }
        
        .catWrapper .catWrapper_Header 
        {
            height: auto;
            color: White;
            font-weight: bold;
            padding: 3px 10px;
        }
        
        .catWrapper .catWrapper_Content 
        {
            height: auto;
            background-color: White;
            border: solid 1px gray;
        }
        
        .catWrapper .catWrapper_Bottom 
        {
            height: 5px;
        }
        
        .catWrapper .catWrapper_TL 
        {
            background: url('http://www.myfootprints.cn/images/lt.gif') no-repeat left top;
            left: 0;
            top: 0;
            width: 5px;
            height: 5px;
            position: absolute;
        }
        
        .catWrapper .catWrapper_TR 
        {
            background: url('http://www.myfootprints.cn/images/rt.gif') no-repeat right top;
            right: 0;
            top: 0;
            width: 5px;
            height: 5px;
            position: absolute;
        }
        
        .catWrapper .catWrapper_BL 
        {
            background: url('http://www.myfootprints.cn/images/lb.gif') no-repeat left bottom;
            left: 0;
            bottom: 0;
            width: 5px;
            height: 5px;
            position: absolute;
        }
        
        .catWrapper .catWrapper_BR 
        {
            background: url('http://www.myfootprints.cn/images/rb.gif') no-repeat right bottom;
            right: 0;
            bottom: 0;
            width: 5px;
            height: 5px;
            position: absolute;
        }

Add comment

Loading