zoukankan      html  css  js  c++  java
  • 多用组合,少用继承

    要做出上图的效果,有多种方法,但我们要用的方法是多用组合少用继承。多用组合少用继承:把相对稳定的部分拆成一个类,把不稳定的部分分拆成几个类。观察上图可知稳定部分是边框样式,区块间隙和行距,不稳定的部分就是字体大小和颜色。现在可以根据规律得出如下代码:

    .f18{font-size:18px;}
    .f20{font-size:20px;}
    .f22{font-size:22px;}
    .red{color:#F00;}
    .common-list{border:solid 1px #CCC;padding:10px;margin-top:20px;400px;}
    .common-list li{height:20px;line-height:20px;list-style:none;}

    完整的代码块如下:

    <html>
    <head>
    <style type="text/css">
    .f18{font-size:18px;}
    .f20{font-size:20px;}    <!--这是不稳定部分-->
    .f22{font-size:22px;}
    .red{color:#F00;}
    .common-list{border:solid 1px #CCC;padding:10px;margin-top:20px;width:400px;}   <!--这是三者都具有的稳定的部分-->
    .common-list li{height:20px;line-height:20px;list-style:none;}                  <!--这是三者都具有的稳定的部分-->
    </style>
    </head>
    
    <body>
    <ul class="common-list f18">
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
    </ul>
    
    <ul class="common-list f20">
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
    </ul>
    
    <ul class="common-list f22 red">
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
        <li>1111111111111111111111111111</li>
    </ul>
    </body>
    </html>
  • 相关阅读:
    面试
    vue axios 应用
    3D全景之ThreeJs
    css垂直居中
    事件处理过程中遇到的问题
    文字溢出
    jquery: 偏移量计算
    jquery: sand picture
    jquery: update carousel logic & animate
    jquery: carousel arrow click
  • 原文地址:https://www.cnblogs.com/52css/p/2540436.html
Copyright © 2011-2022 走看看