左右结构的图文混排CSS列表
左右结构的图文混排CSS列表,我们先来看看一张我截的效果图. 看上面的效果是文字围绕图片吧,下面我们来看看css是怎么实现的吧. div id='jimmy' dl dt class=dt1右边图片效果/dt dd文字内容所要
左右结构的图文混排CSS列表,我们先来看看一张我截的效果图.
看上面的效果是文字围绕图片吧,下面我们来看看css是怎么实现的吧.
<div id='jimmy'>
<dl>
<dt class="dt1">右边图片效果</dt>
<dd>文字内容所要放的地方</dd>
</dl>
</div>
布局就是上面这样了,我们现在来看看css是怎么写的吧
.dt1{
height:250px;
float:right;
margin:0px 0px 0px 0px;
}
就这么几行代码我们所要的效果就完成了,有人会问为什么dd不设置浮动呢?因为dd默认就是向左浮动的所以就不用了.
注明:本站原创转载请注明 www.111cn.cn
- 上一篇：样式列表class 与id的区别
- 下一篇：css 分页效果制作
精彩图集
精彩文章