css模拟实现手机通信录布局效果
分类：实例代码
本章节分享一段代码实例，它实现了模拟手机通信录效果。
也就是右侧是用户名列表，并且实现了使用字母顺序分类，右侧是字母列表，点击可以实现分类查询，当然这里一切都是静态的。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu