css教程:css div图文混排

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

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

<dl  class="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>
    <dl  class="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>
               
    <dl  class="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>
    <dl  class="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

您可能感兴趣的文章：
css样式教程:图文混排[图上文字下]
php和css一样吗
div css对网站优化及在seo方面的好处
彻底弄懂CSS盒子模式(DIV布局快速入门)
CSS3混合模式使用详解
用CSS风格的文本和图形构建网页实用按钮
php和css有什么关联
CSS基础：CSS2盒模型
css教程:css div图文混排
彻底弄懂CSS盒子模式之三