css模擬實現手機通訊錄佈局效果
本章節分享一段程式碼例項,它實現了模擬手機通訊錄效果。
也就是右側是使用者名稱列表,並且實現了使用字母順序分類,右側是字母列表,點選可以實現分類查詢,當然這裡一切都是靜態的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0 0; padding: 0 0; list-style: none; } html, body { height: 100%; } .div-panel { height: 100%; } .div-letter-panel { position: fixed; right: 0px; top: 0px; width: 18px; } .div-letter-panel ul li { height: 18px; line-height: 18px; width: 18px; text-align: center; color: #007aff; } .div-brand-panel { padding: 0px 20px; } .div-brand-letter { background: #f7f7f7; font-weight: bold; } .div-brand-panel ul li { line-height: 30px; padding-bottom: 5px; } .div-brand-item-line { margin-top: 5px; height: 1px; width: 100%; background: #c8c7cc; } </style> </head> <body> <div class="div-panel"> <div class="div-letter-panel"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> <li>U</li> <li>V</li> <li>W</li> <li>X</li> <li>Y</li> <li>Z</li> </ul> </div> <div class="div-brand-panel"> <div class="div-brand-item"> <div class="div-brand-letter">A</div> <ul> <li> <div> <img src="" height="30" />css教程 </div> <div class="div-brand-item-line"></div> </li> <li> <div> <img src="" height="30" />div教程 </div> <div class="div-brand-item-line"></div> </li> </ul> </div> <div class="div-brand-item"> <div class="div-brand-letter">B</div> <ul> <li> <div> <img src="" height="30" />ajax教程 </div> <div class="div-brand-item-line"></div> </li> <li> <div> <img src="" height="30" />json教程 </div> <div class="div-brand-item-line"></div> </li> </ul> </div> </div> </div> </body> </html>
相關文章
- 三維模擬模擬如何實現精益工廠佈局?
- css模擬實現雙擊效果程式碼例項CSS
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- 強大的CSS:實現平行四邊形佈局效果CSS
- css3的flex實現的響應式佈局效果CSSS3Flex
- 純css模擬下雪效果CSS
- Android使用RecycleView實現魅族手機通訊錄介面AndroidView
- CSS多種佈局方式自我實現-水平佈局(二)CSS
- 訪問手機通訊錄
- 如何用css實現"等高佈局"。CSS
- js模擬實現列舉效果JS
- css佈局-實現左中右佈局的5種方式CSS
- 手機通訊錄怎麼備份?手機通訊錄的幾種備份方法
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- CSS Grid實現聖盃佈局CSS
- CSS實現三列DIV等高佈局CSS
- css三列自適應佈局效果CSS
- android之實現跳轉手機通訊錄獲取指定姓名和手機號碼Android
- 樂視超級手機如何匯入通訊錄 樂視超級手機匯入通訊錄教程
- CSS + JS 實現打字機效果CSSJS
- 【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果
- Flutter 城市/通訊錄列表字母索引聯動效果實現Flutter索引
- 三種方法實現CSS三欄佈局CSS
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- Android帶你實現門票佈局效果Android
- js實現的模擬滾動條效果JS
- css3實現手機效果的“切換標籤”CSSS3
- CSS頭部內容和底部佈局效果CSS
- 利用SQL實現通訊錄SQL
- 呼叫通訊錄實現思路
- 攜手京東手機通訊事業部佈局手遊電競 京東星宇成立JDE戰隊
- css實現高度動態變化的佈局CSS
- 仿天貓App實現商品列表佈局切換效果APP
- jquery模擬實現的連結title提示效果jQuery
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- 模擬實現的星星評分效果詳解
- 【css】佈局CSS