展会信息港展会大全

css教程:css+div图文混排
来源:互联网   发布日期:2016-03-25 16:00:43   浏览:2449次  

导读:css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片.效果还不错吧,我们看看css代码.<dl class=...

css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片.

效果还不错吧,我们看看css代码.

<dlclass="week1" id="no1">

<dt><a><img src="images/unknow.gif" height="100" width="133"></a></img></dt>

<dd class="blogername"><a href="#">博客主人:yayapet</a></dd>

<dd class="vote"><span>票&nbsp &nbsp 数:</span>???</dd>

<dd class="view"><span>浏览次数:</span>???</dd>

<dd class="enterlink"><a href="#"></a></dd>

</dl>

<dlclass="week1" id="no2">

<dt><a><img src="images/unknow.gif" height="100" width="133"></a></img></dt>

<dd class="blogername"><a href="#">博客主人:yayapet</a></dd>

<dd class="vote"><span>票&nbsp &nbsp 数:</span>???</dd>

<dd class="view"><span>浏览次数:</span>???</dd>

<dd class="enterlink"><a href="#"></a></dd>

</dl>

<dlclass="week1" id="no3">

<dt><a><img src="images/unknow.gif" height="100" width="133"></a></img></dt>

<dd class="blogername"><a href="#">博客主人:yayapet</a></dd>

<dd class="vote"><span>票&nbsp &nbsp 数:</span>???</dd>

<dd class="view"><span>浏览次数:</span>???</dd>

<dd class="enterlink"><a href="#"></a></dd>

</dl>

<dlclass="week1" id="no4">

<dt><a><img src="images/unknow.gif" height="100" width="133"></a></img></dt>

<dd class="blogername"><a href="#">博客主人:yayapet</a></dd>

<dd class="vote"><span>票&nbsp &nbsp 数:</span>???</dd>

<dd class="view"><span>浏览次数:</span>???</dd>

<dd class="enterlink"><a href="#"></a></dd>

</dl>

好了全部用了dl dd下面来看样式如何控制它的显示方式的.

.week1{

height:259px;

width:156px;

margin:10px 0 0 10px;

padding:10px 0 0 10px;

}

.vote{

margin:7px 0;

}

.view{

clear:left;

margin:7px 0;

}

.enterlink{

background:url(images/enterblog2.gif) no-repeat top left;

margin:5px 0 0 0;

height:21px;

width:77px;

}

.number{

margin:0 0 0 5px;

float:left;

}

#no1{

background:url(images/no1.gif) no-repeat top left;

}

#no2{

background:url(images/no2.gif) no-repeat top left;

}

#no3{

background:url(images/no3.gif) no-repeat top left;

}

#no4{

background:url(images/no4.gif) no-repeat top left;

}

好了其实很简单本站原创转载请注明 www.111cn.net/divcss/css.html

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港