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