多用组合，少用继承

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

 

.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>
posted @ 2012-06-07 15:51  yexingwen  阅读(1491)  评论(0)  编辑  收藏  举报