四、细节

在每篇日志标题的左边都会显示这篇日志的发布日期，这个日期的设计很有意思，上半部分现实的是哪一天，下半部分显示的是哪一月，这是怎么做出来的呢？同样的，让我们来看看这部分的html和css代码：

<div class="PostHead">
<p class="PostDate">
<strong class="day">26</strong>
<strong class="month">Mar</strong>
</p>
</div>

.PostHead {position: relative;}
.PostDate {position: absolute; top: 0px; left: -40px; border-right: solid 1px #e2e2e2;}
.PostDate .month {display: block;}
.PostDate .day {display: block;}

首先给PostHead应用相对定位属性，然后给PostDate应用绝对定位属性，给它赋予一个负值，将它推出PostHead之外40个像素的位置，你还可以给它赋予更大的值，将它直接推到页面之外，让它看起来像是一个标签的样子（这样的设计很常见，都是这样实现的）并且给它的右边框赋值，这样会有一条竖分隔线将日期和标题分隔开，最后分别让month和day元素以块级元素的方式显示，这样他们就会出现在上下两行，而不是一行之内了，这个日期的设计效果也就完成了。

至此，关于Insense这个主题的分析就结束了。从对这个主题的分析，我们能够学到不少非常常见并且有用的设计技巧，对我们自己的设计应该会大有帮助的。