1.去除了信号塔图标，调整高度
2.列表仅有序列表使用那个css，避免搜索时列表混乱
3.添加返回顶部功能，避免挡住内容，手机可长按隐藏，电脑双击隐藏
4.优化多div会显示很乱的问题
现在他看起来是这样的。
代码 或者点击这里复制
http://maomao.anbig.com/tmp/webplugshop.php?shop=yes&id=1
导入网页插件：未命名（当前用户：0，总安装次数：0）
<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<style>
.tp {
margin: 0px;
background-color: #f5f5f5;
font-family: "Helvetica";
border-bottom: 1px solid #e5e5e5;
padding: 4px 8px;
font-size: 13px;
font-weight: 600;
line-height: 20px;
}
.tp p:first-child
{
background-color:#ebf1ec;
height:0px;
padding:0px;
}
.tp img{
width: 0px;
}
.tp a{
}
.tp img{
width:0xp;
}
body {
padding: 0px 0px;
background-color: #fafafa;
}
a {
color: #4078c0;
text-decoration: none;
font-size: 14px;
}
hr
{
border: 0px solid #BED8EA;
}
body>div
{
padding: 9px 10px 10px;
margin: 0;
font-size: 14px;
line-height: 17px;
background-color: #f5f5f5;
border: 1px solid #d8d8d8;
border-bottom: 0;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #e5e5e5;
}
ol{
counter-reset: li; /* 创建一个计数器 */
list-style: none; /* 清除列表默认的编码*/
*list-style: decimal; /* 让IE6/7具有默认的编码 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol li a {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
*padding: 0.4em;
margin: 0.5em 0 0.5em 2em;
background: #ddd;
color: #444;
text-decoration: none;
/*transition动画效果*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ol li a:hover {
background: #eee;
}
ol li a::before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: rgb(221, 221, 221);
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ol li a::after {
position: absolute;
content:"";
border: 0.5em solid transparent;
left: -1em;
top: 50%;
margin-top: -0.5em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ol li a:hover::after {
left: -0.5em;
border-left-color: rgb(221, 221, 221);
}
.news {
min-height: 40px;
padding: 10px 10px 10px 50px;
border: solid 1px #4078c0;
border-radius: 3px;
}
.news a{
font-size: 14px;
line-height: 1.2;
color: #4078c0;
font-weight: 600;
}
.news p{
padding: 0;
margin: 0;
font-size: 12px;
color: #555;
}
.octiconr
{
float:left;
fill:currentColor;
color: #4078c0;
margin:4px;
}
input[type=submit] , input[type=button]
{
background:#ff0000;
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #eee;
background-image: -webkit-linear-gradient(#fcfcfc, #eee);
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
}
.circle
{
border-radius: 50%;
background-color: rgba(69, 93, 11, 0.19);
height: 50px;
width: 50px;
position: fixed;
bottom: 10px;
right: 10px;
padding:0px;
}
.wmhint
{
margin: auto;
height: 50px;
width: 45px;
line-height: 50px;
text-align:center;
color: #3d5040;
font-weight: bolder;
font-size: larger;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".news").prepend( '');
$("#reply_topic_button,#post_topic_button").before('<br><div id="face"><img title="冷" src="/tpl/classic/img/face/e586b7.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /></div><br />');
$('#face img').click(
function(){
var title = "《：" + $(this).attr("title") + "》";
var oldvalue = $("#content").val();
$("#content").val(oldvalue + title);
});
$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
timeout = setTimeout(fn, 300);
}, false);
$this[i].addEventListener('touchend', function(event) {
clearTimeout(timeout);
}, false);
}
}
$("body"). append('<div class="circle" id="wm"><div class="wmhint">顶<div></div>');
$("#wm").click(
function(){
$('body,html').animate({ scrollTop: 0 }, 200);
})
$("#wm").longPress(function(){
$("#wm").slideToggle();
});
$("#wm").dblclick(function(){
$("#wm").slideToggle();
});
});
</script>
聊天框就没有表情