css实现美观的标题

经常有下面的样式：

就是在某个div块里会有一个标题，标题有以下三部分组成：

1. 矩形色块
2. 文字信息
3. 下划线

下面的代码，可以帮助达到这样的结果：

<style>
.captionHeader{
	border-bottom: 1px solid #dfe7ec;
	height: 50px;
	overflow: hidden;
			}
.rect{
	display: block;
	float: left;
	width: 5px;
	height: 18px;
	margin-left: 5px;
	margin-top: 28px;;
	background-color: #a7ca14;
			}
.caption{
	display: block;
	float: left;
	margin-top: 20px;
	margin-left: 5px;
	font-size:20px;
	font-weight: bold;
			}
			
</style>

<!-- html部分 -->
<div class="captionHeader">
	<span class="rect"></span>
	<span class="caption">今日信息：</span>
</div>

代码解读：

html部分

html用了一个div作为大框架，两个span分别代表矩形色块和文字部分。

css部分

1. span属于行内元素，为了两个能进行div等的操作，通过display:block；这行代码把其转化为块元素。
2. 再通过float:left使它们在一行中。
3. 然后对每个span调整background-color,margin,padding等属性，调整位置。

个人学习中，代码可能有问题，欢迎批评指正。