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”>票&nbsp &nbsp 数:???</dd>
 <dd class=”view”>浏览次数:???</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”>票&nbsp &nbsp 数:???</dd>
 <dd class=”view”>浏览次数:???</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”>票&nbsp &nbsp 数:???</dd>
 <dd class=”view”>浏览次数:???</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”>票&nbsp &nbsp 数:???</dd>
 <dd class=”view”>浏览次数:???</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;
}

好了其实很简单本站原创转载请注明

相关文章：

你感兴趣的文章：

标签云：