多语言展示
当前在线:1414今日阅读:103今日分享:49

DedeCms软件等级"★"用div+css替换成图标显示

dedecms是当前很多站长非常喜欢而且是使用最多的cms建站系统,dedecms软件栏目的详情页面内容-软件的推荐等级是利用★这个符号来实现的,这样看起来非常不美观而且没有任何技术含量,下面就来介绍下利用div+css来实现完美的★替换成图片显示的方法。
工具/原料

Dreamweaver

方法/步骤
1

网站根目录下  include/helpers/channelunit.helper.php 找到这个php文件

2

用 dreamweaver8  或者其他编辑工具打开channelunit.helper.php文件找到以下代码/** *  用星表示软件或Flash的等级 * * @param     string  $rank  星星数 * @return    string */if ( ! function_exists('GetRankStar')){    function GetRankStar($rank)    {        $nstar = '';        for($i=1;$i<=$rank;$i++)        {            $nstar .= '★';        }        for($i;$i<=5;$i++)        {            $nstar .= '☆';        }        return $nstar;    }}以上的php代码就是控制实心信息与空心星星的个数的代码,

3

将第二步找到的代码换为:/** *  用星表示软件或Flash的等级 * * @param     string  $rank  星星数 * @return    string */if ( ! function_exists('GetRankStar')){    function GetRankStar($rank)    {        $nstar = '';        for($i=1;$i<=$rank;$i++)        {            $nstar .= 'x';        }                return $nstar;    }}替换后只保留了实心星星显示的数量而直接删除了空心星星的显示数量,

4

下面我们来修改下前台的html模板代码以及css,来达到软件推荐等级用星星图标显示。找到 templets/default/article_soft.htm 这个htm文件

5

同样用DW或者其他编辑工具打开,然后找到软件等级:{dede:field.softrank function='GetRankStar(@me)'/}

7

下面让我们来增加css代码以及图片文件,找到您模板加载的css文件,在里面增加css代码如下:.rate-bar {    background:url(/images/main-bg-list.png) no-repeat;    float:left;    height:13px;    overflow:hidden;    padding:0;}.infolist .rate-bar {    background-position:0 -55px;    float:left;    height:13px;    margin:9px 0 0;    overflow:hidden;    padding:0;    width:70px;}.rate-bar div {    background:url(/images/main-bg-list.png) no-repeat scroll 0 -40px;    float:left;    height:13px;    overflow:hidden;    padding:0;}.rate-bar .xxxxx {    width:100%;}.rate-bar .xxxx {    width:80%;}.rate-bar .xxx {    width:60%;}.rate-bar .xx {    width:40%;}.rate-bar .x {    width:20%;}增加这些css代码后保存,下面我们来上传星星的图片,ok这样几个步骤做完之后到你的dedecms系统后台清理系统缓存,重新生成文章页面htm文件,前台刷新看看效果吧。

推荐信息