收藏文章 楼主
利用html插件做一个完美的搜索页+悬浮客服
版块:其他技术文章   类型:普通   作者:1   查看:4404   回复:4   获赞:3   时间:2018-11-01 22:32:20
需要html插件,不贵50豆豆,购买地址:起飞



预览效果【手机端效果,电脑不咋需要】:123


Image



新建html页面,代码如下:{代码不需要任何改动}


<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
 
.rides-cs {  font-size: 12px; background:#29a7e2; position: fixed; top: 250px; right: 0px; _position: absolute; z-index: 1500; border-radius:6px 0px 0 6px;}
.rides-cs a { color: #00A0E9;}
.rides-cs a:hover { color: #ff8100; text-decoration: none;}
.rides-cs .floatL { width: 36px; float:left; position: relative; z-index:1;margin-top: 21px;height: 181px;}
.rides-cs .floatL a { font-size:0; text-indent: -999em; display: block;}
.rides-cs .floatR { width: 130px; float: left; padding: 5px; overflow:hidden;}
.rides-cs .floatR .cn {background:#F7F7F7; border-radius:6px;margin-top:4px;}
.rides-cs .cn .titZx{ font-size: 14px; color: #333;font-weight:600; line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;}
.rides-cs .cn ul li { line-height: 38px; height:38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;text-align:center;}
.rides-cs .cn ul li span { color: #777;}
.rides-cs .cn ul li a{color: #777;}
.rides-cs .cn ul li img { vertical-align: middle;}
.rides-cs .btnOpen, .rides-cs .btnCtn {  position: relative; z-index:9; top:25px; left: 0;  background-image: url(http://demo.lanrenzhijia.com/2014/service1031/images/lanrenzhijia.png); background-repeat: no-repeat; display:block;  height: 146px; padding: 8px;}
.rides-cs .btnOpen { background-position: 0 0;}
.rides-cs .btnCtn { background-position: -37px 0;}
.rides-cs ul li.top { border-bottom: solid #ACE5F9 1px;}
.rides-cs ul li.bot { border-bottom: none;}
</style>
</head>
<body style="height:2000px;">
 
<div id="floatTools" class="rides-cs" style="height:246px;">
  <div class="floatL">
  	<a id="aFloatTools_Show" class="btnOpen" title="查看在线客服" style="top:20px;display:block" href="javascript:void(0);">展开</a>
  	<a id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" style="top:20px;display:none" href="javascript:void(0);">收缩</a>
  </div>
  <div id="divFloatToolsView" class="floatR" style="display: none;height:237px;width: 140px;">
    <div class="cn">
      <h3 class="titZx">花沁社区在线客服</h3>
      <ul>
        <li><span>客服一号</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2843055597&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
        <li><span>客服二号</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1823830261&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
        <li><span>交流群聊</span> <a target="_blank" href="/index.php?c=app&a=puyuetian_htmlpage:index&htmlname=QQ"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
    
    
      </ul>
    </div>
  </div>
</div>
 
<script>
	$(function(){
		$("#aFloatTools_Show").click(function(){
			$('#divFloatToolsView').animate({width:'show',opacity:'show'},100,function(){$('#divFloatToolsView').show();});
			$('#aFloatTools_Show').hide();
			$('#aFloatTools_Hide').show();				
		});
		$("#aFloatTools_Hide").click(function(){
			$('#divFloatToolsView').animate({width:'hide', opacity:'hide'},100,function(){$('#divFloatToolsView').hide();});
			$('#aFloatTools_Show').show();
			$('#aFloatTools_Hide').hide();	
		});
	});
</script>
 
 
 
 
 
 
 
 
 
<head>
 
<link rel="stylesheet" type="text/css" href="http://www.lanrenzhijia.com/demos/36/3667/demo/css/normalize.css" />
<link rel="stylesheet" href="http://www.lanrenzhijia.com/demos/36/3667/demo/css/font-awesome.min.css">
 
<link rel="stylesheet" href="http://www.lanrenzhijia.com/demos/36/3667/demo/css/style.css">
 
</head>
 
 
 
	<div class="search d7">
	<form name="form_search" method="get" action="index.php">
	<input type="hidden" name="c" value="app">
	<input type="hidden" name="a" value="puyuetian_search:index">
	<div class="pk-searchbar">
		<div>
			
		 <input type="search" placeholder="搜索︱发现更大的世界~"name="w" autocomplete="off">
	 
		</div>
		<div class="pk-clear"></div>
	</div>
</form>
 
</div>


回复列表
默认   热门   正序   倒序
花沁电子
3F
1Lv79  置顶
25行改为500比较合适


<body style="height:500px;">

 1   2018-11-01 22:51:55  回复
花沁电子
2F
1Lv79  置顶
搜索条下面可以手动添加【广告】or【热搜


emotion

 1   2018-11-01 22:36:52  回复
花沁电子
5F
1Lv79
@100364:(在4F的宅便急) emotion
 1   2018-11-02 08:27:15  回复
wolfman
4F
爱域菌Lv99
给力,喜欢

广东,广州,天河区

 1   2018-11-02 06:48:19  回复

回复:利用html插件做一个完美的搜索页+悬浮客服

暂无用户组
退出
等级:0级
天豆:
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1940天豆仅需194元

终身个人版授权+3880天豆仅需388元

3年尊享版授权+13580天豆仅需1358元

终身尊享版授权+27160天豆仅需2716元

扫个红包吧,快乐你我他

红包

Powered by HadSky 7.10.0

©2015 - 2022 HadSky

购买产品 用户文档 加入QQ群 授权查询 网站绑定 客户案例 陕ICP备13005805号

您的IP:54.224.117.125,2022-01-28 05:01:07,Processed in 0.04342 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(3) 分享
分享

请保存二维码或复制链接进行分享

取消