利用HTML、CSS 实现带表情的评论框的制作教程

　　HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码。图1为原始状态，图2为点击表情时出现的表情列表，可以任意选择一个或者多个。下面我们来看看实现的代码。

图1

图2

　　实现的代码：

　　html代码：

1. <div class="Main">     
2.          <div class="Input_Box">     
3.            <textarea class="Input_text"></textarea>     
4.            <div class="faceDiv"> </div>     
5.            <div class="Input_Foot"> <a class="imgBtn" href="javascript:void(0);"></a><a class="postBtn">确定</a> </div>     
6.          </div>     
7.        </div>    

　　css3代码：

1. .Input_Box {     
2.     width: 495px;     
3.     height: 160px;     
4.     border: 1px solid #ccc;     
5.     transition: border linear .2s, box-shadow linear .5s;     
6.     -moz-transition: border linear .2s, -moz-box-shadow linear .5s;     
7.     -webkit-transition: border linear .2s, -webkit-box-shadow linear .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: 0 0 5px #ccc;     
15.     -webkit-box-shadow: 0 0 5px #ccc;     
16.     box-shadow: 0 0 5px #ccc;     
17. }     
18. .Input_Box>textarea {     
19.     width: 485px;     
20.     height: 111px;     
21.     padding: 5px;     
22.     outline: none;     
23.     <