css模擬實現手機通訊錄佈局效果

螞蟻小編發表於2017-04-09
原文網址 : https://www.softwhy.com/article-6449-1.html
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>

相關文章