您现在的位置是：网站首页> 编程资料编程资料

利用HTML、CSS 实现带表情的评论框的制作教程HTML中利用div+CSS实现简单的箭头图标的代码css 11种方法实现一个tips带有描边的小箭头css实现带箭头和圆点的轮播可自定义箭头样式的CSS3气泡提示框CSS3制作可自定义配置箭头的气泡提示框效果源码基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果纯CSS3实现漂亮的input输入框动画样式库(Text input love)CSS实现让同一行文字和输入框对齐的方法CSS实现带箭头的提示框效果【示例代码】

2023-10-09 354人已围观

简介 这篇主要介绍HTML带表情的评论框，表情通过Json数据加载，可以根据自己的喜好改变表情。本评论框代码为HTML，CSS，JQ三个方面的代码，html的代码还是比较简单的，大家可以学习一下

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

图1

图2

　　实现的代码：

　　html代码：

XML/HTML Code复制内容到剪贴板
  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代码：

CSS Code复制内容到剪贴板
  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.     border: 0px solid #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: 1px solid #ccc; &

    上一篇：简单掌握HTML中水平线标注与代码注释的用法HTML教程：html水平线段HTML <!--...--> 注释标签的深层次作用分析Html注释 Html中标记文字注释的符号css注释和html注释用法及应用范围介绍html中块注释的使用详细介绍

    下一篇：html禁止清除input文本输入缓存的两种方法HTML5单选框、复选框、下拉菜单、文本域的实现代码HTML5 文件域+FileReader 分段读取文件并上传到服务器html列表框、文本域、文件域的示例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网