利用HTML-CSS 实现带表情的评论框的制作教程
HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。实现的代码：html代码：
XML/HTMLCode
1.
2. 3. class="Input_text">
4.
5. class="Input_Foot">class="imgBtn"href="javascript:void(0;">确定 6. 7. css3代码：CSSCode
1..Input_Box{
2. width:495px; 3. height:160px;
4. border:1pxsolid#ccc;
5. transition:borderlinear.2s,box-shadowlinear.5s; 6. -moz-transition:borderlinear.2s,-moz-box-shadowlinear.5s;
7. -webkit-transition:borderlinear.2s,-webkit-box-shadowlinear.5s;
8. -moz-border-radius:5px; 9. -webkit-border-radius:5px; 10. border-radius:5px; 11. background-color:#fff; 12. overflow:hidden; 13. position:absolute;
14. -moz-box-shadow:005px#ccc; 15. -webkit-box-shadow:005px#ccc; 16. box-shadow:005px#ccc; 17.}
18..Input_Box>textarea{ 19. width:485px; 20. height:111px; 21. padding:5px;
22. outline:none;
23. border:0pxsolid#fff; 24. resize:none;
25. font:13px"微软雅黑",Arial,Helvetica,sans-serif;
26. -moz-border-radius:5px; 27. -webkit-border-radius:5px; 28. border-radius:5px; 29.}
30..Input_Foot{
31. width:100%; 32. height:35px;
33. border-top:1pxsolid#ccc; 34. background-color:#fff;
35. -moz-border-radius:005px5px; 36. -webkit-border-radius:005px5px; 37. border-radius:005px5px; 38. position:absolute; 39.}
40..imgBtn{
41. float:left;
42. margin-top:8px; 43. margin-left:10px;
44. background-image:url(imgs.png; 45. background-repeat:no-repeat; 46. background-position:0-13px; 47. height:18px; 48. width:20px; 49. cursor:pointer 50.}
51..imgBtn:active{
52. margin-top:9px; 53.}
54..imgBtn:hover{
55. background-position:0-31px 56.}
57..postBtn{
58. float:rightright;
59. font:13px"微软雅黑",Arial,Helvetica,sans-serif;
60. color:#808080;
61. padding:9px20px7px20px; 62. border-left:1pxsolid#ccc; 63. cursor:pointer;
64. -moz-border-radius:005px0; 65. -webkit-border-radius:005px0; 66. border-radius:005px0; 