15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

右下角联系方式

孙正萌| 发布于 2022-05-30 14:46:11| 841阅读| 0点赞| 0评论 预览效果
举报


html


<body class='box box-3'>
		<dl>
        	<dd>代理人联系信息<b id="small_button" class="up">b>dd>
           	<ul>
            	<li><span>姓   名:span><i>张三i>li>
                <li><span>手机号:span><i>13245678936i>li>
                <li><span>邮   箱:span><i>xu@itrus.com.cni>li>
                <li><span>办公电话:span><i>010-2555123i>li>
            ul>            
        dl>
 body>


css


.box{width:100%; overflow:hidden;}
.box-3 dl{ display:table; position:absolute; bottom:5px; right:5px; width:300px; background:#fff;box-shadow: 0 0 7px rgba(0,0,0,.3); border-radius:3px; }
.box-3 dl dd{height: 40px;line-height: 40px; color:#fff; font-size: 16px;position: relative;padding-left: 10px; background:#06b5ff; border-radius:3px 3px 0 0;}
.box-3 dl dd b{ display: block; height:40px; width:40px; position:absolute; top:0; right:0; cursor:pointer;}
.box-3 dl dd b.up{ background:url(../images/up.png) center center no-repeat;}
.box-3 dl dd b.down{ background:url(../images/down.png) center center no-repeat;}
.box-3 dl ul{padding:0 20px; height:165px;}
.box-3 dl ul li{ height:40px; line-height:40px; border-top: 1px dashed #EDEDED;}
.box-3 dl ul li span{ display:inline-block; width:70px; text-align:right;}
.box-3 dl ul li i{ font-style:normal; margin-left:10px;}

js


<script type="text/javascript" src="drag.js">script>
	
	<script>
		$(function(){
			$('.box-3 dl').each(function(){
				$(this).dragging({
					move : 'both',
					randomPosition : false
				});
			});
		});
	script> 
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部