用html、js、css實現通訊錄功能

阿新 • • 發佈：2018-12-23

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <title>通訊錄</title> <link rel="stylesheet" type="text/css" href="../css/api.css" /> <link

rel="stylesheet" type="text/css" media="screen" href="../iconfont/iconfont.css" /> <link rel="stylesheet" href="../css/aui.css"> <style> /**全部的樣式start**/ body { color: #363636; background-color: #f6f6f6; } p { display: inline

; color: #868686; } /**全部的樣式end**/ /**頂部導航欄start**/ /**頂部導航欄背景色start**/ /*.head { background: #303030; }*/ /**頂部導航欄背景色end**/ /*頂部導航欄置頂start*/ /*.aui-bar { position: fixed; }*/ /*頂部導航欄置頂end*/ /**頂部導航欄end**/

/**主要內容部分start**/ /*.main{ margin-top: 3.5rem; }*/ /*修改下劃線樣式start*/ .aui-list .aui-list-item { background: none; } .aui-media-list-item-inner { margin-right: 1.25rem; border-bottom: 1px #f6f6f6 solid; } .aui-list { background: none; } /*修改下劃線樣式end*/ /*頭像框的樣式及間距start*/ .aui-list .aui-list-item-media { width: 3.5rem; padding: 0.5rem 0.75rem 0.5rem 0.75rem; } .aui-list .aui-list-item { color: #363636; min-height: 3.5rem; background: none; } /*頭像框的樣式及間距end*/ /*修改灰色字色start*/ .aui-list .aui-list-item-text { color: #868686; } /*修改灰色字色end*/ /*修改姓名職業的間距字色start*/ .aui-list .aui-list-item-title { color: #363636; } .career { color: #363636 !important; } .name { font-weight: bolder; } /*修改姓名職業的間距字色end*/ /*電話圖示樣式start*/ .icon { color: #868686; } .icon-active { color: #F5862D!important; } /*電話圖示樣式end*/ /*左邊字母樣式start*/ .letter_left_single { line-height: 3.5rem; text-align: center; display: inline; float: left; } .color_white { color: #fff; } /*左邊字母樣式end*/ /*右邊字母樣式start*/ .right-letter { width: 5%; height: 600; position: fixed; right: 0.5rem; top: 2rem; z-index: 999; } .letter_single { margin: 0; color: #bcbcbc; font-size: 0.6rem; text-align: center; display: block; } .test { font-size: 0.6rem; } .orange { color: #f5862d; } .big { background: #fce4b2; opacity: 0.7; height: 2.5rem; width: 2.5rem; border-radius: 1.3rem; text-align: center; line-height: 2.2rem; position: fixed; right: 3.5rem; top: 4rem; color: #f5862d; font-size: 1.3rem; display: none; } .big-active { display: block; } /*右邊字母樣式end*/ /**主要內容部分end**/ </style> </head> <body>    <div class="main aui-clearfix">  <div class="right-letter" onclick="change()"> <ul class="test" id="test"> <li class="big" id="big">A</li>//字母點選變大的效果 <a href="#first" class="letter_single">#</a> <a href="#a" class="letter_single">A</a> <a href="#b" class="letter_single">B</a> <a href="#c" class="letter_single">C</a> <a href="#d" class="letter_single">D</a> <a href="#e" class="letter_single">E</a> <a href="#f" class="letter_single">F</a> <a href="#g" class="letter_single">G</a> <a href="#h" class="letter_single">H</a> <a href="#i" class="letter_single">I</a> <a href="#j" class="letter_single">J</a> <a href="#k" class="letter_single">K</a> <a href="#l" class="letter_single">L</a> <a href="#m" class="letter_single">M</a> <a href="#n" class="letter_single">N</a> <a href="#o" class="letter_single">O</a> <a href="#p" class="letter_single">P</a> <a href="#q" class="letter_single">Q</a> <a href="#r" class="letter_single">R</a> <a href="#s" class="letter_single">S</a> <a href="#t" class="letter_single">T</a> <a href="#u" class="letter_single">U</a> <a href="#v" class="letter_single">V</a> <a href="#w" class="letter_single">W</a> <a href="#x" class="letter_single">X</a> <a href="#y" class="letter_single">Y</a> <a href="#z" class="letter_single">Z</a> </ul> </div>  <div class="contacts" id="contacts"></div> <div class="aui-card-list"> <div class="aui-card-list-content"> <ul class="aui-list aui-media-list"> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="first">#</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">007</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single color_white" id="first">#</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">008</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="a">A</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">阿里</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="e">E</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">Ella</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="f">F</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">弗裡恩</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="g">G</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">哥哥</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="k">K</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">卡卡西</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="n">N</p> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../image/portrait_cjf.jpg" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title"> <div class="aui-list-item-text aui-list-item-left"> <div class="aui-list-item-title aui-font-size-16 name">娜娜</div> <div class="aui-list-item-text aui-font-size-14 career aui-margin-l-10">服務員</div> </div> <div class="aui-list-item-text"> 10086 </div> </div> <a href="tel:10086"> <div class="aui-list-item-right icon-more-info"> <i class="iconfont icon-phone icon icon-active aui-font-size-18"></i> </div> </a> </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle aui-clearfix"> <p class="letter_left_single" id="o">O</p>

用html、js、css實現通訊錄功能

用html、js、css實現通訊錄功能

每日知識總結計劃（java、android、react native、web框架、js、css、html、ajax）首頁

HTML 清除js、css快取辦法

Go語言與html模板、js、css的引用以及表單查詢

web.xml中配置訪問資源URL/時無法訪問.html、.jsp、.js、.css等靜態資源時的解決方案

iOS 載入本地html、js、css方法

java去除html程式碼中含有的html、js、css標籤，獲取文字內容

Intellij Idea中Jsp頁面不能訪問靜態資源（圖片、js、css）

將 laravel 專案內靜態檔案，css、js、images 部署到七牛雲 CDN

用HTML，js實現單選題，多選題，計分，報題功能

dreamweaver 應用註釋css、js、php的快捷鍵

解決使用SpringMVC時，css、js、image等靜態資源無法載入的問題

Eclipse中java、js、html程式碼自動提示功能（自動補全）

jsp、js、thymeleaf、html的區別和聯絡

gulp對css、js、img的壓縮和css圖片的base64

Win32 匯編 - 跳轉指令: JMP、JECXZ、JA、JB、JG、JL、JE、JZ、JS、JC、JO、JP 等

js和css實現手機橫豎屏預覽思路整理

html 引用js與css檔案

圖片輪播的JS和CSS實現

html，js，css載入順序

用html、js、css實現通訊錄功能

相關推薦