手机端通讯录制作，字母索引查找

首先先引入 flexible.js 手机端人适配，引入jquery插件，引入 jquery.charfirst.pinyin,js获取第一个汉字首字母

HTML部分内容

sort.css部分

sort。css的部分代码

#letter{

width: 100px;

height: 100px;

border-radius: 5px;

font-size: 75px;

color: #555;

text-align: center;

line-height: 100px;

background: rgba(145,145,145,0.6);

position: fixed;

left: 50%;

top: 50%;

margin:-50px 0px 0px -50px;

z-index: 99;

display: none;

font-family: PingFangSC-Medium;

}

#letter img{

width: 50px;

height: 50px;

float: left;

margin:25px 0px 0px 25px;

}

.sort_box{

width: 100%;

overflow: hidden;

}

.sort_list{

padding: .1rem .4rem 0;

position: relative;

height: 1.2rem;

line-height: 1.2rem;

background: #fff;

color: #222;

font-size: 16px;

color: #000;

box-sizing: content-box;

}

.sort_list .num_logo{

width: 50px;

height: 50px;

border-radius: 10px;

overflow: hidden;

position: absolute;

top: 5px;

left: 20px;

}

.sort_list .num_name{

color: #000;

/*border-bottom: .5px solid #EBEBEB;*/

}

.sort_letter{

height: .6rem;

line-height: .6rem;

padding-left: .4rem;

color:#000;

font-size: .28rem;

/*border-bottom:1px solid #ddd;*/

}

.initials{

position: fixed;

display: inline-flex;

flex-direction: column;

justify-content: center;

align-items: center;

top: 1rem;

right: .3rem;

height: 100%;

width: 16px;

padding-right: 0;

text-align: center;

font-size: 0.22rem;

line-height: 0.32rem;

font-family: PingFangSC-Medium;

z-index: 99;

background: transparent;

color: #222;

}

.initials li+li{

padding-top:0.04rem;

}

效果图：

请大佬帮助，我只是小白一只，只会使用有些地方还不是明白

手机端通讯录制作，字母索引查找相关推荐

从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
手机端页面制作之——背景图片因长度不够而出现堆叠
每日一更文章,看看我能坚持多久,这是第三天了今天的文章主题是解决背景图片因为长度有限不能够充满整个页面,当设置 background-repeat: repeat-y; 或者 background- ...
html手机端在线制作,HTML5制作,手机H5页面制作,H5炫酷效果,前端制作 | 纬博赛特...
前端制作,又称网页重构,即将设计变成页面.万维网,万变不离其宗,归根结底,页面还是HTML. 静态网页制作过程,主要包括三个要素:HTML(标准通用标记语言下的一个应用).级联样式表和JavaScri ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
超强大的手机端logo设计制作软件免费分享！
logo设计是一款非常专业的手机端logo设计制作软件. 使用这款工具可以帮助你在短时间内快速做出漂亮的logo,不用再为怎么设计logo而烦恼,软件集logo设计.logo制作.图标制作.徽章设计. ...
视频转gif怎么用手机操作？手机端gif动画制作的方法
现在不仅在电脑上可以将视频制作成gif动图,使用手机也可以将视频转成gif图.给大家分享一款在线视频转gif动画工具,无需下载任何软件,不占用手机内存,通过手机自带浏览器,一键就可以在线完成视频转gi ...
【学习】如何制作手机端html模板（REM的实际应用）
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...
php企业网站通讯录管理系统,EML企业通讯录管理系统v5.4.15 经典版+手机端实时查看人员联系方式+客户关系管理系统...
企业通讯录管理系统,向企业员工随时随地的提供企业通讯录信息,用户可在手机端实时查看人员联系方式,拨打电话等全面提高了企业内部沟通效率. 主要功能有:用户管理(添加用户,删除用户用户,更新用户资料):通 ...

手机端通讯录制作，字母索引查找

手机端通讯录制作，字母索引查找相关推荐

最新文章

热门文章