多用组合,少用继承

多用组合,少用继承

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

 

.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;}

 

完整的代码块如下:

 

<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>

你可能感兴趣的:(继承)