使用一个像素设计列表

一个像素的背景图片可以非常通用。 使用repeat-x可以创建水平线，repeat-y可以创建垂直线，以及repeat可以将其用作填充颜色。 作为一个有趣的概念证明，我们可以使用它来创建一个类似深度图的无序列表。

HTML 代码很简单，就像任何其他嵌套的无序列表一样。

<ul id="project-list">
    <li><a href="#">Civil Engineering</a>
        <ul>
            <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
            <li><a href="#">Culver’s Home Office</a></li>
            <li><a href="#">First Addition to Highland Addition</a></li>
            <li><a href="#">Fox Point Apartments</a>
                <ul>
                    <li><a href="#">East Side</a></li>
                    <li><a href="#">West Side</a></li>
                </ul>
            </li>
            <li><a href="#">Metropolitan Place Phase II</a></li>
            <li><a href="#">Oak Park Place of Baraboo</a></li>
            <li><a href="#">Premier Coop</a></li>
            <li><a href="#">Sleep Inn & Suites</a></li>
            <li><a href="#">Tradewinds Business Center</a></li>
            <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
        </ul>
    </li>
    <li><a href="#">Environmental Engineering</a></li>
    <li><a href="#">Telecommunications Engineering</a>
        <ul>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
            <li><a href="#">Oakland County/Radian Communications Michigan</a></li>
            <li><a href="#">T-Mobile Site Deployment</a></li>
            <li><a href="#">U.S. Cellular Network Development</a></li>
            <li><a href="#">Western Wireless South Dakota</a></li>
        </ul>
    </li>
</ul>

在 CSS 中，我们将单像素 PNG 图形应用于列表本身，垂直重复，列表项本身水平重复。 在列表项上，我们可以通过为其中的锚链接提供白色背景来阻止线条延伸到整个宽度，该背景覆盖在列表项上，遮挡了线条。

#project-list {
  background: transparent url(../images/graypixel.png) repeat-y 15px 0;
  width: 340px;
}

#project-list li {
  font-size: 16px;
  margin: 15px 0 20px;
  padding: 0 0 0 10px;
}

#project-list li a {
  background: white;
  color: #1F6DD9;
  display: block;
  padding: 3px;
}

#project-list li a:hover {
  color: #84B8FF;
}

#project-list li ul li {
  background: transparent url(../images/graypixel.png) repeat-x 0 8px;
  font-size: 13px;
  margin: 4px 0 4px 5px;
  padding: 0 0 0 20px;
}

#project-list li ul li a {
  padding:0 0 0 3px;
}

#project-list li ul li ul {
  background: transparent url(../images/graypixel.png) repeat-y 15px 0;
  margin-bottom: 10px;
}

#project-list li ul li ul li {
  margin-left: 16px;
  padding-left: 10px;
}