html5仿手机通讯录按字母排序及搜索功能_仿手机通讯录字母排序资源-CSDN文库

共10个文件

js：3个

css：2个

html：1个

html5

通讯录

按字母排序

5星 · 超过95%的资源需积分: 50 99 浏览量 2018-03-23 11:55:58 上传评论 6 收藏 139KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5仿手机通讯录按字母排序及搜索功能.rar （10个子文件）

html5仿手机通讯录按字母排序及搜索功能

circle.html 6KB

images

avator.png 5KB

jquery.1.9.1.min.js 90KB

jquery.charfirst.pinyin.js 28KB

circle.js 7KB

fonts

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.woff 23KB

css

bootstrap.min.css 118KB

bootstrap-switch.min.css 6KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <META name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <style> * { margin: 0; padding: 0; } body{ font-size:16px; } .header{ position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 45px; background: #21a4f4; } .header p{ margin-left:20px; height: 45px; line-height: 45px; color: #fff; font-size: 18px; display:inline-block; } .header span{ color:#fff; margin-right: 20px; float: right; line-height: 45px; } .content{ margin-top:45px; } .nav{ background-color: #fff; } .header-two{ position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 45px; background: #21a4f4; } .header-two p{ margin-left:20px; height: 45px; line-height: 45px; color: #fff; font-size: 18px; display:inline-block; } .header-two span{ color:#fff; margin-left:6px; line-height: 45px; } .header-two i{ color:#fff; margin-left: 20px; line-height: 45px; } .header-two input{ border:none; width:80%; background-color:transparent; } .sort_box-two{ display:block; } .input{ border-bottom: 2px #fff solid; display: inline-block; height: 42px; width: calc(100% - 50px); } ul li{list-style: none;} a{text-decoration: none;cursor: pointer;} html{height: 100%;} a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);} #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; } #letter img{ width: 50px; height: 50px; float: left; margin:25px 0px 0px 25px; } [class^="sort_box"]{ width: 100%; padding-top: 45px; overflow: hidden; } [class^="sort_list"]{ padding:10px 60px 10px 80px; position: relative; line-height: 50px; border-bottom:1px solid #ddd; } [class^="sort_list"] .num_logo{ width: 50px; height: 50px; border-radius: 10px; overflow: hidden; position: absolute; left: 20px; } [class^="sort_list"] .num_logo img{ width: 50px; height: 50px; } [class^="sort_list"] .num_name{ color: #000; } .sort_letter{ height: 30px; line-height: 30px; padding-left: 20px; color:#787878; font-size: 14px; border-bottom:1px solid #ddd; } .initials{ position: fixed; top: 47px; right: 0px; height: 100%; width: 15px; padding-right: 10px; text-align: center; font-size: 12px; z-index: 99; background: rgba(145,145,145,0); } .initials li img{ width: 14px; } </style>  <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-switch.min.css"> <script src="js/jquery.1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script> <script type="text/javascript" src="js/circle.js"></script> </HEAD> <BODY> <div class="header-two"> <div> <i class="glyphicon glyphicon-chevron-left" onclick="back()"><a href="javascript:back()"></a> </i> <div class="input"> <span class="glyphicon glyphicon-search"></span> <input id="search" type="text" /> </div> </div> </div> <div class="header"> <div> <p>通讯录</p> <span class="glyphicon glyphicon-plus"></span> <span id="gosearch" class="glyphicon glyphicon-search"></span> </div> </div> <div id="letter" ></div> <div class="sort_box-two"> </div> <div class="sort_box"> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">张三</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">李四</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">王五</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">刘六</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">马七</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">黄八</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">莫九</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">陈十</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">陈十</div> </div><div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">陈十</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">a九</div> </div> <div class="sort_list"> <div class="num_logo"> <img src="images/avator.png" alt=""> </div> <div class="num_name">1十</div> </div> </div> <div class="initials"> <ul> </ul> </div> </BODY> </HTML>

评论收藏

内容反馈