亲品藏
^
Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

不知道在进行网页设计学习的网友,有没有接到一个上级要求制作带有表情评分的页面,这是留给网友给该网页投票的一个功能,它其实是可以有专门的模板可以使用的,下面小编就为大家分享了兔斯基表情评分模板的代码,大家可以自行修改。

Dreamweaver cs6制作兔斯基表情评分模板代码分享:

打开Adobe Dreamweaver cs5,新建一个网页,切换到代码那里。然后把以上的代码全部删除,粘贴如下代码:

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

在<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.jpg) 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.jpg) 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.jpg) 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.jpg) 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.jpg) no-repeat;}

#apps_svy_mood a.mood2{background:url(images/dandian.jpg) no-repeat;}

#apps_svy_mood a.mood3{background:url(images/xuexi.jpg) no-repeat;}

#apps_svy_mood a.mood4{background:url(images/kengdie.jpg) no-repeat;}

#apps_svy_mood a.mood5{background:url(images/dajiangyou.jpg) no-repeat;}

</style>

<script type="text/javascript">var faceMe = 4492</script>

然后继续插入

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

切换到设计页面。效果如下

Dreamweaver cs6制作表情评分页面_Dw兔斯基表情评分模板代码分享

如果需要修改”给力、学习“等文字,则直接修改即可!需要完整代码或者模板请投我一票,私信我从外地百度云盘下载。关注我有更多网页装修模板!

总结:以上就是小编为大家带来的全部相关Dreamweaver cs6制作表情评分页面内容,相信大家一定有所了解了吧。

 

相关阅读

CopyRight 亲品藏移动版(m.qinpinchang.com)