DW制作兔斯基的表情打分图标(给力、淡定等)
我要评论这篇教程是向脚本之家的朋友介绍DW制作兔斯基的表情打分图标方法，有给力、淡定、打酱油、学习等图标。图标是动态的。而且可以看到打分的分数。如下
方法/步骤
打开Adobe Dreamweaver cs5，新建一个网页，切换到代码那里。然后把<body>以上的代码全部删除，粘贴如下代码：
在<body></body>之间插入代码：
<style type="text/css">
/* apps_svy_mood */
#apps_svy_mood{width:580px;margin:0 auto;}
#apps_svy_mood h2{margin:30px 0 30px 0;padding:0 0 0 60px;height:50px;line-height:65px;overflow:hidden;background:url(images/qin.gif) no-repeat;font-size:16px;font-family:"微软雅黑","宋体";font-weight:normal;color:#000000;border-bottom:solid 1px #ddd;text-align:left;}
#apps_svy_mood .apps_svy_mood{margin:0 auto;padding:0px;}
#apps_svy_mood ul{margin:0px;padding:0px;}
#apps_svy_mood .mood{width:50px;margin:0 auto;}
#apps_svy_mood li{width:116px;float:left;text-align:center;list-style:none;position:relative;color:#3366cc;font-size:14px;font-weight:800;}
继续插入代码：
#apps_svy_mood .mood_result{width:50px;height:auto;margin:0 auto;padding:0px;}
#apps_svy_mood .mood_result .ft{padding:0px;position:relative;margin-bottom:0px;left:1px;*left:0px;_left:0px;color:#000000;font-size:12px;}
#apps_svy_mood .mood_result .ft_b{padding:0px;position:relative;margin-bottom:0px;left:1px;*left:0px;_left:0px;color:#EE0000;font-size:12px;font-weight:bold;}
#apps_svy_mood .mood_result .bar{width:10px;height:52px;border:1px solid #DADADA;padding:0px;background:#fff;position:relative;margin-bottom:5px;left:20px;*left:0px;_left:0px;}
#apps_svy_mood .mood_result .bar .bg{margin:0px;padding:1px;height:0;background:url(images/bg.gif) repeat;width:8px;position:absolute;left:0px;bottom:0px;line-height:0px;font-size:0px;}
继续：
#apps_svy_mood .mood_nopd{width:50px;height:50px;margin:0 auto;background:url(images/biaoqing.gif) no-repeat;border:solid 1px #fff;}
#apps_svy_mood .mood1_nop{background-position:0px 0px;}
#apps_svy_mood .mood2_nop{background-position:-50px 0px;}
#apps_svy_mood .mood3_nop{background-position:-100px 0px;}
#apps_svy_mood .mood4_nop{background-position:-150px 0px;}
#apps_svy_mood .mood5_nop{background-position:-200px 0px;}
继续：
#apps_svy_mood .mood_opd{width:50px;height:50px;margin:0 auto;background:url(images/biaoqing.gif) no-repeat;cursor:default;border:solid 1px #fff;}
#apps_svy_mood .mood1_op{background-position:0px 0px;}
#apps_svy_mood .mood2_op{background-position:-50px 0px;}
#apps_svy_mood .mood3_op{background-position:-100px 0px;}
#apps_svy_mood .mood4_op{background-position:-150px 0px;}
#apps_svy_mood .mood5_op{background-position:-200px 0px;}
#apps_svy_mood a{width:50px;height:50px;display:block;margin:0 auto;border:solid 1px #fff;}
#apps_svy_mood a:hover{font-weight:800;text-decoration:none;}
#apps_svy_mood a:hover{border:solid 1px #ddd;}
#apps_svy_mood a.mood1{background:url(images/geili.gif) no-repeat;}
#apps_svy_mood a.mood2{background:url(images/dandian.gif) no-repeat;}
#apps_svy_mood a.mood3{background:url(images/xuexi.gif) no-repeat;}
#apps_svy_mood a.mood4{background:url(images/kengdie.gif) no-repeat;}
#apps_svy_mood a.mood5{background:url(images/dajiangyou.gif) no-repeat;}
</style>
<script type="text/javascript">var faceMe = 4492</script>
然后继续插入
切换到设计页面。效果如下
以上就是DW制作兔斯基的表情打分图标过程介绍，大家按照上面步骤进行操作即可，大家也可以更改一下或是新增几个表情打分图标！
相关文章
如何制作自己的表情？斗图表情制作器制作属于自己的表情包的方法图文教
在这个全民斗图的时代，你的图库里面没有一点资源怎么跟人家聊天，那么就用斗图表情制作器来制作表情包吧，那么如何制作自己的表情呢？本文将提供斗图表情制作器制作属于自2016-08-24如何自制表情？表情包自制软件装b手帐制作各种各样的表情图文教程
如何自制表情包，想自己设计不同的表情，表情包自制软件有哪些？装b手帐可以自制表情吗？本文将提供装b手帐制作各种各样的表情图文教程供大家了解，让我们一起制作更多喜爱2016-07-02- 这篇教程是向脚本之家的朋友介绍美图秀秀制作搞笑的GIF qq表情方法，教程制作出来的qq表情非常地不错，很简单，推荐到脚本之家，一起来学习吧2015-02-26
- 表情me是一款表情个性化市场的大众软件，用户通过自己动手便可以塑造出一个超萌的自己，凭借似颜绘三千画手。那么表情me如何制作卡通表情/大头贴？下面小编就为大家详细介2014-12-02
- echo回声是一款能够自己制作有声表情的软件，那么echo回声有声怎么表情制作呢?下面就和小编一起去看下echo回声有声表情的制作教程吧2014-11-29
- MojiMe怎么制作微信动态表情?很多朋友都不知道怎么怎么使用MojiMe，其实方法很简单的，下面小编就为大家详细介绍一下，一起来看看吧2014-11-04
- 最近小编的很多微信好友都在体验Mojime这款软件来制作动画表情，小编也使用了一下，Mojime软件中，用户制作表情可以分为单人/双人动画表情制作两种方式，不过流程都基本差2014-11-03
微信自定义表情制作软件Mojime Andorid体验版发布（附下载）
MojiMe Android是一款基于微信（WeChat）的动态表情制作软件。下载后安装到你的Android手机上，拍摄或上传一张你或好友的照片，剩下的就交给MojiMe吧 ^^ 分享给微信好友后2014-11-03表情制作软件 表情工厂iPhone版火爆上线:席卷微信的表情制作神器!
说到聊天工具，表情可是各大聊天软件中不可或缺的一部分，生动形象的表情不仅能将内心所想表达得淋漓尽致，还能引来小伙伴们围观收藏呢，如果你还在抱怨表情不够用，不够新2013-10-11- 斗图表情王app拥有海量表情素材，轻松制作属于自己的专属表情，一键分享，那么就用斗图表情王app来制作表情包吧，那么如何制作表情？本文将提供斗图表情王制作自己的专属表2016-08-29
最新评论