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