容器中列表的CSS样式

Question

任何人都可以帮我写一个与此类似的CSS代码：

Answer 1

这个CodePen应该给你一个起点

它们基本上是带有样式列表的容器。在他们的内部是一个标题，可以是<h2>或任何标题或没有标题，但只是一个风格的标题。请务必重置<ul>的边距，并在<li>中使用箭头的背景图片。理想情况下，您希望在精灵表中。

HTML

<div class="link-container">
  <h2>Sales Reports</h2>
  <ul>
    <li><a href="#">Sales By Customer</a>
    <li><a href="#">Sales By Item</a>
  </ul>
</div>

<div class="link-container">
  <h2>Invoice Reports</h2>
  <ul>
    <li><a href="#">Invoice Aging</a>
    <li><a href="#">Invoice Details</a>
    <li><a href="#">Credit Note Details</a>
  </ul>
</div>

CSS

.link-container {
  margin-bottom: 20px;
  width: 300px;
}

.link-container h2 {
  background-color: #abd5ea;
  color: #333;
  font-size: 18px;
  line-height: 30px;
  margin: 0;
  padding-left: 10px;
}

.link-container ul {
  font-size: 13px;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.link-container ul li{
  background-image: url('http://i.msdn.microsoft.com/dynimg/IC688534.png');
  background-repeat: no-repeat;
  background-position: center left;
  border-bottom: #777 1px solid;
  padding-left: 20px;
  line-height: 30px;
}

.link-container ul li a {
  text-decoration: none;
}