css 模块化二

css模块化解决方案二

by weiming le

HTML

<div id="wrapper">
  <div class="module1">
    <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="module2">
    <header>
       <h1>标题标题</h1>

    </header>
    <div class="bd">
      <p>xxx各种描述</p>
    </div>
  </div>
  <div class="module3">
    <header>
       <h1>标题标题</h1>

    </header>
    <div class="bd">
      <p>xxx各种描述</p>
    </div>
  </div>
  <div class="module4">
    <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; }
/*公用样式*/
.module1, .module2, .module3, .module4 { float:left; margin:0 20px 20px 0; }
.module1 header,.module2 header,.module3 header,.module4 header { height:30px; line-height:30px;color:#333; font-size:14px; }
.module1 header h1,.module2 header h1,.module3 header h1,.module4 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; }
.module1 .bd,.module2 .bd,.module3 .bd,.module4 .bd { height:200px; padding:10px; border-radius:0 0 4px 4px; color:#fff;  }
.module1 .bd p,.module2 .bd p,.module3 .bd p,.module4 .bd p { }
/*私有样式*/
.module1,.module3 { width:240px; }
.module2,.module4 { width:440px; }
.module1 .bd { background:#54BAF3; }
.module2 .bd { background:#9C0; }
.module3 .bd { background:#F27B2E; }
.module4 .bd { background:#b8efe1; }