手机端通讯录制作，字母索引查找
首先先引入 flexible.js 手機端人適配，引入jquery插件，引入 jquery.charfirst.pinyin,js獲取第一個漢字首字母
?
HTML部分內(nèi)容
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;
}
?
效果圖：
請大佬幫助，我只是小白一只，只會使用有些地方還不是明白
總結(jié)
以上是生活随笔為你收集整理的手机端通讯录制作，字母索引查找的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA代码爬虫获取网站信息
- 下一篇： 计算机一级主要学什么,计算机一级考试内容