发布表情的预览显示效果
?css?:
.codeBox .codeBody {
?width:486px;
?height:175px;
?border-width:0 1px 1px 1px;
?border-style:solid;
?border-color:#dfe6f6;
?clear:both;
?padding-top:3px;
?background:#ffffff;
?position:relative;
}
.codeBox .codeBody .leftBody {
?width:243px;
?height:100%;
?float:left;
}
.codeBox .codeBody .rightBody {
?width:243px;
?height:100%;
?float:left;
}
.codeShape {
?display:block;
?width:80px;
?height:20px;
?line-height:20px;
?float:left;
?border:1px solid #dfe6f6;
?margin:-1px 0 0 -1px;
?text-align:center;
?color:#333333;
}
.codeShape:hover {
?background:#f6f6f6;
}
.codeShape span {
?display:none;
}
.codeShape span cite {
?font-style:normal;
?font-size:18px;
}
.leftBody .codeShape:hover span {
?display:block;
?position:absolute;
?top:0;
?right:0;
?width:160px;
?height:45px;
?border:1px solid #316ac4;
?background:white;
?padding-top:20px;
}
.rightBody .codeShape:hover span {
?display:block;
?position:absolute;
?left:0;
?top:0;
?width:160px;
?height:45px;
?border:1px solid #316ac4;
?background:white;
?padding-top:20px;
}
.iebug_kill {
?height:1px;
?overflow:hidden;
?clear:both;
}
</style>
?
?
?
?
?
html:
?
?<div id="mood_con">
????? <div onclick="addCode(this);"><font>*^ο^*</font><span><cite>*^ο^*</cite><br />
??????? 哦~呵呵傻笑</span> </a> <a href="#" onclick="addCode(this);"><font>(+_+)?</font><span><cite>(+_+)?</cite><br />
??????? 不知道你在说什么</span></a> <a href="#" onclick="addCode(this);"><font>﹌○﹋</font><span><cite>﹌○﹋</cite><br />
??????? 喔嗨呦</span></a> <a href="#" onclick="addCode(this);"><font>///^_^....</font><span><cite>///^_^....</cite><br />
??????? 造成“冷”...干笑</span></a> <a href="#" onclick="addCode(this);"><font>（ˇ︿ˇ﹀</font><span><cite>（ˇ︿ˇ﹀</cite><br />
??????? 不以为然</span></a> <a href="#" onclick="addCode(this);"><font>~@^_^@~</font><span><cite>~@^_^@~</cite><br />
??????? 可爱呦！</span></a> <a href="#" onclick="addCode(this);"><font>?o?|||</font><span><cite>?o?|||</cite><br />
??????? 无听（就是听不懂的意思）</span></a> <a href="#" onclick="addCode(this);"><font>( ^_^ )?</font><span><cite>( ^_^ )?</cite><br />
??????? 什么意思？</span></a> <a href="#" onclick="addCode(this);"><font>^_^"</font><span><cite>^_^"</cite><br />
??????? 尴尬的笑</span></a>
??????? <div onclick="addCode(this);"><font>..@_@|||||..</font><span><cite>..@_@|||||..</cite><br />
??????? 头昏眼花</span></a> <a href="#" onclick="addCode(this);"><font>(⊙o⊙)</font><span><cite>(⊙o⊙)</cite><br />
??????? 目瞪口呆</span></a> <a href="#" onclick="addCode(this);"><font>x__x,</font><span><cite>x__x,</cite><br />
??????? 唉...别哭了</span></a> <a href="#" onclick="addCode(this);"><font>ˋ_ˊ*</font><span><cite>ˋ_ˊ*</cite><br />
??????? 你不要命啦</span></a> <a href="#" onclick="addCode(this);"><font>⊙﹏⊙∥∣°</font><span><cite>⊙﹏⊙∥∣°</cite><br />
??????? 真尴尬</span></a> <a href="#" onclick="addCode(this);"><font>~~>_<~~</font><span><cite>~~>_<~~</cite><br />
??????? 痛哭，十分伤心</span></a> <a href="#" onclick="addCode(this);"><font>(﹁ ﹁)</font><span><cite>(﹁ ﹁)</cite><br />
??????? 值得怀疑哦~~</span></a> <a href="#" onclick="addCode(this);"><font>╮(╯3╰)╭</font><span><cite>╮(╯3╰)╭</cite><br />
??????? 无奈</span></a> <a href="#" onclick="addCode(this);"><font>T_T</font><span><cite>T_T</cite><br />
??????? 流泪的样子</span></a>
??????? <div class="iebug_kill"></div>
????? </div>
??? </div>
