以前写过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.net/cssdiv/css.html
