【IT168 技术文档】

  1. 引言

  我们经常会在网页上看到使用星形图案表示对某个软件或某篇文章的评价，通常以五个星形作为最高标准，指定的等级对应使用实心填充，如图1-1所示，在学习ASP.NET自定义控件的第一天，我们将开发这样的自定义控件。

  2. 分析

  可以看到这样的一个自定义控件包含两部分：显示的文本和包含两种图案（实心和空心星形）的图片，为了呈现出这样的结果，最方便的就是将这两部分放到包含一行两列的表格中。接下来要考虑的就是如何根据评分显示若干实心和空心星形。

  看到这个图案的第一个想法可能就是根据评分首先显示实心图形，再判断还需要显示几个空心星形（用5减评分），这样的话需要做多次循环才能实现，但是在HTML里有更好的实现方法。

  想一下在使用CSS设置背景图片时可以设置background-repeat属性，该属性标识背景图片按哪个方向重复，可以利用这个特性首先显示一个外层的div，该div始终显示5个空心的星形图形，在该层中嵌套另一个div，内层div显示实心星形图案。

 background-repeat、background-image、background-color、background-position构成了设置背景样式的属性族

  既然可以按X方向重复星形背景，那么显示指定个数的星形也就有答案了—我们可以根据得分设置指定层（div）的宽度即可，而且为了方便，将两个星形图案放置到一个图片文件里，再应用background-position显示指定位置星形即可。

  根据以上分析，此自定义控件中需要具有两个属性：
 
  Comment 评分项目注释,字符串类型
  Score 得分,根据该属性显示相应的实心图形,数字类型