用HTML和CSS制作注释的教程
本文主要介绍了HTML评论框与表达，这是加载JSON数据，可以根据自己的喜好更改表达式。本文代码的HTML，CSS的代码，该代码三方面JQ，HTML代码还是比较简单的，你可以学习它随着审查盒表达的HTML，通过JSON数据负载的表达，可以根据自己的喜好改变表达。这个评论框的代码是HTML，CSS，三个方面和JQ。图1是原始状态。图2是单击表达式时出现的表达式列表，您可以任意选择其中的一个或多个表达式。
图1
图2
实现代码：
HTML代码：
xml代码将内容复制到剪贴板。
确定
CSS3代码：
CSS代码将内容复制到剪贴板。
{。input_box
宽度：495px；
身高：160px；
边境：1px solid # CCC；
过渡：边境linear.2s，box-shadow linear.5s；
-moz过渡：边境linear.2s，-moz box-shadow linear.5s；
WebKit的过渡：边境linear.2s，WebKit的影子linear.5s盒；
-moz边界半径：5px；
WebKit的边界半径：5px；
边界半径：5px；
背景颜色：# FFF；
溢出：隐藏；
位置：绝对；
-moz盒阴影：00 5px # CCC；
Webkit框阴影：00 5px # CCC；
盒子的影子：00 5px # CCC；
}
{ input_box >文本。
宽度：485px；
身高：111px；
填料：5px；
大纲：无；
Border: 0px solid #fff;
调整大小：无；
微软雅黑字体：13px
-moz边界半径：5px；
WebKit的边界半径：5px；
边界半径：5px；
}
{。input_foot
宽度：100%；
身高：35px；
边境上：1px solid # CCC；
背景颜色：# FFF；
-moz边界半径：00 5px 5px；
WebKit的边界半径：00 5px 5px；
边界半径：00 5px 5px；
位置：绝对；
}
{。imgbtn
浮点数：左；
边距：8px；
左：10px保证金；
背景图像：URL（IMGS。PNG）；
背景：无重复重复；
背景位置：0 13px；
身高：18px；
宽度：20px；
鼠标指针
}
{ imgbtn：活跃。
边距：9px；
}
{ imgbtn：悬停。
背景位置：0 31px
}
{。如果只是
浮：错误；
微软雅黑字体：13px
颜色：# 808080；
填料：9px 20px 7px 20px；
左边界：1px solid # CCC；
光标：指针；
00 5px -moz边界半径：0；
WebKit的边界半径：00 5px 0；
00 5px边界半径：0；
}
{如果只是：悬停。
颜色：# 333；
背景颜色：# efefef；
}
{如果只是：活跃。
填料：10px 20px 6px 20px；
}
{。facediv
宽度：500px；
身高：120px；
边境上：1px solid # CCC；
位置：绝对；
背景颜色：# FFF；
5px 5px -moz边界半径：00；
WebKit的边界半径：5px 5px 00；
5px 5px边界半径：00；
}
{ facediv > IMG。
边境：1px solid # CCC；
浮点数：左；
margin-left: - 1px；
边距：- 1px；
职位：相对；
宽度：24px；
身高：24px；
填料：3px 3px 3px 3px；
光标：指针；
}
{。facediv > IMG：悬停
背景颜色：# efefef；
}
{。facediv > IMG：主动
填料：4px 3px 2px 3px；
}
Javaｓｃｒｉｐｔ代码：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
Var ImgIputHandler = {
面对的道路：{
{外观名称：微笑
{外观名称：，面对的道路：1_派派GIF}，
{外观名称：颜色
{外观名称：发呆
{外观名称：骄傲
{外观名称：眼泪
{外观名称：害羞
{外观名称：闭嘴
{外观名称：哭
{外观名称：尴尬
{外观名称：愤怒
{外观名称：调皮
{外观名称：，面对的道路：13_咆哮咆哮GIF}，
{外观名称：惊喜
{外观名称：悲伤
{外观名称：酷
{外观名称：冷汗
{外观名称：疯狂
{外观名称：呕吐
{外观名称：，面对的道路：20_笑了笑GIF}，
{外观名称：可爱
{外观名称：白色的眼睛
{外观名称：傲慢
{外观名称：饥饿
{外观名称：困
{外观名称：恐慌
{外观名称：出汗
{外观名称：面对的道路：28_，含笑憨笑。gif}，
{外观名称：士兵
{外观名称：斗争
{外观名称：祸
{外观名称：问题
{外观名称：嘘
{外观名称：晕
{外观名称：折磨
{外观名称：下降
{外观名称：骨架
{外观名称：敲门
{外观名称：再见
{外观名称：，面对的道路：40_擦汗GIF}，
{外观名称：小气的鼻子
{外观名称：掌声
{外观名称：
{外观名称：坏的微笑
{外观名称：左哼哼
{外观名称：嗯右
{外观名称：打哈欠
{外观名称：轻视
{外观名称：公
{外观名称：快哭泣
{外观名称：阴险
{外观名称：亲戚
{外观名称：害怕
{外观名称：穷
{外观名称：菜刀
{外观名称：西瓜
{外观名称：啤酒
{外观名称：篮球
{外观名称：乒乓球
{外观名称：拥抱
{外观名称：握手
{外观名称：笑的好
{外观名称：听音乐
}
，
init：函数（）{
无功isshowimg = false；
$（。input_text）。Focusout（function（）{）
$（））父（）Css（边框颜色
$（））父（）Css（框阴影
$（这）。父（）。Css（-moz box-shadow
$（这）。父（）。Css（-webkit box-shadow
}）；
$（。input_text）。焦点（函数（）{）
$（））父（）Css（边框颜色
$（这）。父（）。Css（box-shadow）、00 3px RGBA（19105192，5））；
$（这）。父（）。Css（-moz盒阴影）、00 3px RGBA（24139232，5））；
$（这）。父（）。Css（-webkit box-shadow
}）；
$(.ImgBtn).Click (function () {)
如果（isshowimg = = false）{
isshowimg =真；
$（这）。父（）Prev（），动画（{ margintop：125px}，300）；
如果（$（。facediv ），孩子们（）。长度= = 0）{
对于（var i = 0；i < imgiputhandler.facepath.length；我）{
$（。facediv）。追加（）；
}
$（。facediv > IMG）。Click（function（）{）
isshowimg = false；
$（这）。父（）。动画（{ margintop：0px}，300）；
imgiputhandler.insertatcursor（$（。input_text ）{ 0 }，{} $（this）。Attr（标题）））；
}）；
}
其他{ }
isshowimg = false；
$（这）。父（）Prev（），动画（{ margintop：0px}，300）；
}
}）；
$（。如果只是）。Click（function（）{）
警报（$（。input_text）。瓦迩（））；
}）；
}，
insertatcursor：功能（这个行业，myvalue）{
如果（文档选择）{
MyField.focus（）；
SEL = document.selection.createrange（）；
sel.text =自我价值；
Sel.select（）；
如果（myfield.selectionstart | | } { myfield.selectionstart = = 0）
让myfield.selectionstart var =；
VaR myfield.selectionend EndPos =；
无功restoretop = myfield.scrolltop；
myfield.value = myfield.value.substring（0，让自我价值myfield.value.substring（EndPos），这个行业的价值。长度）；
如果（restoretop > 0）{
myfield.scrolltop = restoretop；
}
MyField.focus（）；
myfield.selectionstart =让myvalue.length；
myfield.selectionend =让myvalue.length；
{人}
myfield.value =自我价值；
MyField.focus（）；
}
}
}