css +div 图片排列样式

以前写过div图片排列的教程了,今天再次来写一篇吧.下面的图片就在图片的排列了

下面来看看css 图片排列的代码.

<div id="right_photo">
    <ul>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_03.gif" /></a></li>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_05.gif" /></a></li>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_07.gif"></a></li>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_09.gif"></a></li>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_15.gif"></a></li>
    <li><a title="79视觉摄影机构" href="images/01.jpg" rel="lightbox[roadtrip]"><img src="images/images/page_photo_16.gif"></a></li>    

    </ul> 
</div>

上面的代码简单的就li,a ul,div 就出来了,代码简洁比table 好多了.好了跑题了,下面看看css代码.

#right_photo {
 background-color: #625f5f;
 background-image: url(images/images/page_case_07.gif);
 background-repeat: no-repeat;
 background-position: left top;
 height: 609px;
}
#right_photo li {
 float: left;
 width: 130px;
 padding-top: 22px;
 padding-right: 26px;
 padding-bottom: 22px;
 padding-left: 26px;
}
#right_photo li a {
 height: 104px;
 width: 104px;
 margin-right: auto;
 margin-left: auto;
 display: block;
}
#right_photo li img {
 border: 2px solid #e987b1;
}

OK我们进行用id 形式直接控制right_photo里面的li,a,ul,img标签我样式.

本站原创,请尊重作者劳动转载请注明来自:   www.111cn.cn/cssdiv/css.html