任何人都可以帮我写一个与此类似的CSS代码:
答案 0 :(得分:1)
这个CodePen应该给你一个起点
它们基本上是带有样式列表的容器。在他们的内部是一个标题,可以是<h2>
或任何标题或没有标题,但只是一个风格的标题。请务必重置<ul>
的边距,并在<li>
中使用箭头的背景图片。理想情况下,您希望在精灵表中。
<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>
.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;
}