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

回复

我来回复
  • 暂无回复内容