本实例的效果图：
首先看一下他的结构，设置时间层date居左侧，文章的标题h2,文章的描述层meta，文章的主题内容为p
<div id="wrap">
<div class="list">
<p class="date"></p>
<h2></h2>
<p class="meta"></p>
<p></p>
</div>
</div>
将所有的元素放入id为wrap的层中，下面开始具体深入的编写HTML代码：
<div id="wrap">
<div class="list">
<p class="date">September <b>03</b></p>
<h2><a href="http://www.aspxcs.net/">DIV CSS布局实例：用css网站布局之十步实录！</a></h2>
<p class="meta">来自：<a href="http://www.aspxcs.net/">www.aspxcs.net/</a> | 编辑：<a href="#">aspxcs.net</a> | <a href="#">没有回复 ?</a></p>
<p>新标签页：每当您打开一个新的标签页，就会直观地看到您最常访问的网站、最常使用的搜索引擎、最近加入书签的页面以及最近关闭的标签页等等。
应用程序快捷方式：无需打开浏览器即可启用网络应用程序。应用程序快捷方式可以直接加载您常用的在线应用程序。</p>
</div>
<div class="list">
<p class="date">August <b>26</b></p>
<h2><a href="http://www.aspxcs.net/">定义列表dl打造图文并茂的CSS列表元素</a></h2>
<p class="meta">来自：<a href="http://www.aspxcs.net/">www.aspxcs.net/</a> | 编辑：<a href="#">aspxcs.net</a> | <a href="#">没有回复 ?</a></p>
<p>新标签页：每当您打开一个新的标签页，就会直观地看到您最常访问的网站、最常使用的搜索引擎、最近加入书签的页面以及最近关闭的标签页等等。
应用程序快捷方式：无需打开浏览器即可启用网络应用程序。应用程序快捷方式可以直接加载您常用的在线应用程序。</p>
</div>
<div class="list">
<p class="date">August <b>22</b></p>
<h2><a href="http://www.aspxcs.net/">可以隐藏与滑出显示的超炫CSS+JS菜单实例</a></h2>
<p class="meta">来自：<a href="http://www.aspxcs.net/">www.aspxcs.net/</a> | 编辑：<a href="#">aspxcs.net</a> | <a href="#">没有回复 ?</a></p>
<p>新标签页：每当您打开一个新的标签页，就会直观地看到您最常访问的网站、最常使用的搜索引擎、最近加入书签的页面以及最近关闭的标签页等等。
应用程序快捷方式：无需打开浏览器即可启用网络应用程序。应用程序快捷方式可以直接加载您常用的在线应用程序。</p>
</div>
</div>
有了上面的基础开始下面的CSS编码,整体声明:
* { margin:0; padding:0; font-size:12px; color:#666; list-style:none; font-family:Arial, Helvetica, sans-serif;}
body{ background:#ebead1;}
a{ color:#514f42;text-decoration:none;}
a:hover{ color:#669900;}
设置整个层wrap的样式，宽度为650px；上下边距为30px,左右为水平居中对齐 ,list是设置每一个列表层，宽度为650px；
#wrap{ width:650px; margin:30px auto; overflow:hidden;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:1px dashed #666633;}
设置时间左侧浮动，宽76px; text-transform: uppercase;(小写转化成大写)
.list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0; background:#514F42;text-transform: uppercase;text-align: center;font-size:10px;font-weight: bold; color:#FFF;}
.list b{display:block; font-size:40px; color:#FFF; line-height:40px;}
设置标题描述层meta；设置它的下边距为25px，是为了，主体内容可以左对齐不环绕。
.list .meta{margin:0 0 25px 0; color:#979680;}
.list h2 a{font-size: 1.8em; }
.list p{ display:block; line-height:18px;}
