css模块化

来源：互联网发布：精准医疗大数据编辑：程序博客网时间：2024/05/29 13:52

封装：

HTML代码                                                               <div class=”module-a”>    <h3>标题1</h3>    <p>描述文字</p> </div> <div class=”module-b”>    <h3>标题2</h3>    <ul>        <li>列表</li>        <li>列表</li>        <li>列表</li>    </ul> </div>

CSS代码

.module-a{.....} .module-a h3{.....} .module-a p{.....} .module-b{.....} .module-b h3{.....} .module-b ul{.....}.module-b ul li{.....} .module-b ul li{.....} .module-b ul li{.....}

继承

HTML代码                                                            <div class=” module module-A module-A-a”></div><div class=” module module-A module-A-b”></div>CSS代码                                                                  .module {.....}.module-A {.....}.module-A-a {.....}.module-A-b {.....}    .module-B {.....}        .module-B-a {.....}        .module-B-b {.....}

多态

HTML代码<div class=”module-A”></div><div class=”part-A ”>      <div class=”module-A”></div></div><div class=”part-B ”>      <div class=”module-A”></div></div><div class=”part-C ”>      <div class=”module-A”></div></div>CSS代码                                                                 .module-A {.....}.part-A .module-A {.....}.part-B .module-A {.....}.part-C .module-A {.....}

来源：http://blog.csdn.net/hacke2/article/details/21700073

阅读全文

0 0