css模块化三

css 模块化三示例

by weiming le

HTML

<div id="wrapper">
    <div class="module extend_mod1">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd">
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module extend_mod2">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd">
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module extend_mod3">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd">
            <p>xxx各种描述</p>
        </div>
    </div>
    <div class="module extend_mod4">
        <header>
            <h1>标题标题</h1>
        </header>
        <div class="bd">
            <p>xxx各种描述</p>
        </div>
    </div>
</div>

CSS

* { margin:0; padding:0; }
#wrapper { margin:20px auto; width:724px; overflow:hidden; zoom:1; }
/*基类*/
.module { float:left; margin:0 20px 20px 0;   }
.module header { height:30px; line-height:30px;color:#333; font-size:14px; }
.module header h1 { font-size:14px; text-indent:10px; background:rgba(238,238,238,0.7); border:1px solid #ddd; border-radius:4px 4px 0 0; }
.module .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff;  }
.module .bd p { }
/*扩展类*/
.extend_mod1,.extend_mod3 { width:240px; }
.extend_mod2,.extend_mod4 { width:440px; }
.extend_mod1 .bd { background:#54BAF3; }
.extend_mod2 .bd { background:#9C0; }
.extend_mod3 .bd { background:#F27B2E; }
.extend_mod4 .bd { background:#b8efe1; }