请教图中的文章列表和日期 用div css的写法?

html-css09

请教图中的文章列表和日期 用div css的写法?,第1张

<style>

.item{font-size:12pxwidth:260px}

.item:after{height:0content:''display:blockvisibility:hiddenclear:both}

.list-item{background:url(小列表图片地址) left center no-repeatpadding-left:25pxheight:24pxline-height:24pxcolor:#6d7174width:180px}

.list-date{float:rightheight:24pxline-height:24pxcolor:#ba333a}

</style>

<div class="item">

<div class="list-item">白宫发表声明称 奥巴马总统将</div>

<div class="list-date">04-17</div>

</div>

<div class="item">

<div class="list-item">[多图]如果你能站上去 - WAVEp</div>

<div class="list-date">04-17</div>

</div>

效果如图所示：

如果觉得间隔有些大，可以减少item的宽度为255，注意list-item中的url为列表小图片相对于此文件的地址。

遇到这样图文混合的，我是这样来实现的！

代码：

<div class="list">

<dl>

<dt><img src="nr_1.gif" /></dt>

<dd>

<ul>

<li>sdddsd</li>

<li>sdddsd</li>

<li>sdddsd</li>

<li>sdddsd</li>

<li>sdddsd</li>

<li>sdddsd</li>

</ul>

</dd>

</dl>

</div

样式：

dl,dt,dd,ul,li{margin:0padding:0list-style:none}

.list dl dt{float:left}

.list dl dd{float:left}

细节上的我就不怎么详细说了！根据你的需要在进行调整！