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.cn/divcss/css.html