mui仿微信页面.zip_mui聊天界面资源-CSDN文库

共192个文件

gif：100个

png：51个

less：14个

微信

html5

css3

5星 · 超过95%的资源需积分: 49 26 浏览量 2020-02-27 14:15:17 上传评论 7 收藏 1.27MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

mui仿微信页面.zip （192个子文件）

mui.css 95KB

mui.min.css 74KB

font-awesome.css 37KB

font-awesome.min.css 30KB

icons-extra.css 3KB

mui.indexedlist.css 2KB

fontawesome-webfont.eot 162KB

head (91).gif 3KB

head (41).gif 3KB

head (49).gif 3KB

head (14).gif 3KB

head (84).gif 3KB

head (5).gif 3KB

head (38).gif 3KB

head (63).gif 3KB

head (51).gif 3KB

head (32).gif 3KB

head (15).gif 3KB

head (95).gif 3KB

head (9).gif 3KB

head (87).gif 3KB

head (81).gif 3KB

head (12).gif 3KB

head (3).gif 3KB

head (27).gif 3KB

head (13).gif 3KB

head (30).gif 3KB

head (16).gif 3KB

head (45).gif 3KB

head (35).gif 3KB

head (39).gif 3KB

head (20).gif 3KB

head (43).gif 3KB

head (76).gif 3KB

head (86).gif 3KB

head (88).gif 3KB

head (90).gif 3KB

head (46).gif 3KB

head (2).gif 3KB

head (31).gif 3KB

head (8).gif 3KB

head (17).gif 3KB

head (83).gif 3KB

head (60).gif 3KB

head (68).gif 3KB

head (89).gif 3KB

head (80).gif 3KB

head (47).gif 3KB

head (96).gif 3KB

head (53).gif 3KB

head (62).gif 3KB

head (78).gif 3KB

head (11).gif 3KB

head (56).gif 3KB

head (99).gif 3KB

head (36).gif 3KB

head (29).gif 3KB

head (79).gif 3KB

head (67).gif 3KB

head (58).gif 3KB

head (19).gif 3KB

head (73).gif 3KB

head (52).gif 3KB

head (1).gif 3KB

head (37).gif 3KB

head (54).gif 3KB

head (42).gif 3KB

head (75).gif 3KB

head (92).gif 3KB

head (21).gif 3KB

head (85).gif 3KB

head (72).gif 3KB

head (0).gif 3KB

head (71).gif 3KB

head (55).gif 3KB

head (26).gif 3KB

head (69).gif 3KB

head (24).gif 3KB

head (82).gif 3KB

head (22).gif 3KB

head (50).gif 3KB

head (93).gif 3KB

head (18).gif 3KB

head (48).gif 3KB

head (6).gif 3KB

head (65).gif 3KB

head (33).gif 3KB

head (34).gif 3KB

head (97).gif 3KB

head (74).gif 3KB

head (28).gif 3KB

head (57).gif 2KB

head (4).gif 2KB

head (66).gif 2KB

head (25).gif 2KB

head (70).gif 2KB

head (59).gif 2KB

head (94).gif 2KB

head (44).gif 2KB

head (77).gif 2KB

共 192 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/mui.indexedlist.css" rel="stylesheet" /> <style> html,body { height: 100%; overflow: hidden; } .mui-bar { -webkit-box-shadow: none; box-shadow: none; } .mui-indexed-list-group{ background-color: #efeff4; font-size: 12px; height: 25px; } .con { margin-top: 12px; font-size: 16px; color: #333; } .mui-indexed-list-bar{ background-color:transparent; } .mui-search{ display: none; } img{ border-radius:8px ; } #order{ height: 60px; line-height: 60px; text-align: center; background-color: #efeff4; color: #333; } #new{ background-color: #EC971F; } #group{ background-color: #2AC845; } #tag{ background-color: #0062CC; } #off{ background-color: #0062CC; } #Top-bar{ height: 0px !important; padding-top: 0px; padding-bottom: 0px; } </style> </head> <body>  <div class="mui-content"> <div id='list' class="mui-indexed-list"> <div class="mui-indexed-list-search mui-input-row mui-search"> <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友"> </div> <div class="mui-indexed-list-bar"> <a>↑</a> <a>☆</a> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a> <a>#</a> </div> <div class="mui-indexed-list-alert"></div> <div class="mui-indexed-list-inner"> <div class="mui-indexed-list-empty-alert">没有数据</div> <ul class="mui-table-view" id="list"> <li data-group="↑" class="mui-table-view-divider mui-indexed-list-group" id="Top-bar"></li> <li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="new" class="mui-media-object mui-pull-left" src="img/icon/my-fill.png"><div class="con">New Friends</div></a></li> <li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="group" class="mui-media-object mui-pull-left" src="img/icon/group-fill.png"><div class="con">Group Chats</div></a></li> <li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="tag" class="mui-media-object mui-pull-left" src="img/icon/tag-fill.png"><div class="con">Tags</div></a></li> <li data-value="new" data-tags="NewFriends" class="mui-table-view-cell mui-indexed-list-item"><a href="javascript:;"><img id="off" class="mui-media-object mui-pull-left" src="img/icon/like-fill.png"><div class="con">Official Accounts</div></a></li> <li data-group="☆" class="mui-table-view-divider mui-indexed-list-group">Starred</li> <div id="Top"></div> <li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li> <div id="A"></div> <li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li> <div id="B"></div> <li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li> <div id="C"></div> <li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li> <div id="D"></div> <li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li> <div id="E"></div> <li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li> <div id="F"></div> <li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li> <div id="G"></div> <li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li> <div id="H"></div> <li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li> <div id="J" ></div> <li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li> <div id="K"></div> <li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li> <div id="L"></div> <li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li> <div id="M"></div> <li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li> <div id="N"></div> <li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li> <div id="P"></div> <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li> <div id="Q"></div> <li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li> <div id="R"></div> <li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li> <div id="S"></div> <li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li> <div id="T"></div> <li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li> <div id="W"></div> <li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li> <div id="X"></div> <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li> <div id="Y"></div> <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li> <div id="Z"></div> <li data-group="#" class="mui-table-view-divider mui-indexed-list-group">#</li> <div id="other"></div> </ul> <div id="order"> </div> </div> </div> </div> <script src="js/mui.min.js"></script> <script src="js/mui.indexedlist.js"></script> <script src="js/Convert_Pinyin.js"></script> <script type="text/javascript" charset="utf-8"> mui.init(); mui.ready(function() { }); var header = document.querySelector('header.mui-bar'); var list = document.getElementById('list'); var bar = document.getElementsByClassName("mui-indexed-list-bar")[0]; //calc hieght list.style.height = parseInt(document.body.offsetHeight)*1.0 + 'px'; //create window.indexedList = new mui.IndexedList(list); var xing = ["安","白","陈","大","峨","分","高","好","九","卡","来","马","皮","钱","任","谁","它","我","先","与","之李","魏","沈","张","徐","常","念","王","赵","钱","孙","周","吴","郑","欧阳"]; var ming = ["彪","巨昆","锐","花","小小","可爱","杰新","国伟","宁","徐天","宝信","来福","常威","刚","伟人","李伟","姚明","陆渡","帅新","阳刚"]; function getname(c, d) {//随机姓名 let xingming =c[Math.floor(Math.random() * (c.length))] + d[Math.floor(Math.random() * (d.length))]; return xingming; } function loaddata(){ var sum = 0; for(let i=0;i<300;i++){ sum++; var name = getname(xing, ming); var qp= pinyin.getFullChars(name);//全拼 var jp = pinyin.getCamelChars(name);//简拼 var doc = document.getElementById(jp[0]); var headon = parseInt(Math.random()*100); //console.log(name,qp,jp) if(doc != null){ doc.innerHTML+='<li data-value="'+jp+'" data-tags="'+qp+'" class="mui-table

评论收藏

内容反馈