现在的位置: 首页 > 综合 > 正文

css 图片横排

2018年05月15日 ⁄ 综合 ⁄ 共 1661字 ⁄ 字号 评论关闭

 
<style type="text/css">
ul.photo {
  list-style-type :none;
  width:60%;margin:0px 0px;
  padding:0px;
  }

ul.photo li{
   float:left;
   width:140px;
   height:120px;
   text-align: center;
   overflow: hidden;
   display:inline;
   }
ul.photo li img{
   width:120px;
   height:90px;
   margin:2px;
   padding:4px;
   background: #eee;
   color:#f60;
   border: solid 1px #ddd;
   }
ul.photo li a:hover img {
      background:#fff;
      color:#f60;
      padding:4px;
      border: solid 1px #FF9A33;
      }
ul.photo li b{
   float:left;
   width:100%;
   font-style:normal;
   text-align: center;
   height:15px;
   overflow:hidden;
   }
</style>

<ul class="photo">
<li>
 <a href="#">
  <img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" />
 </a>

 <b style="color:{标题颜色}">{标题}</b>
</li>
<li>
<a href="#">
<img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a>
<b style="color:{标题颜色}">{标题}</b>
</li>

<li>
<a href="#"><img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a><b style="color:{标题颜色}">{标题}</b></li>

<li><a href="#}">
 <img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" />
</a>
<b style="color:{标题颜色}">{标题}</b>
</li>

<li><a href="#">
<img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a>
<b style="color:{标题颜色}">{标题}</b>
</li>

<li><a href="#}">
<img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a>
<b style="color:{标题颜色}">{标题}</b>
</li>

<li><a href="#">
<img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a>
<b style="color:{标题颜色}">{标题}</b>
</li>

<li><a href="#">
<img src="tang/tttt.png" onerror="this.src="img/nopic.gif"" alt="人气值:{阅读次数}" /></a>
<b style="color:{标题颜色}">{标题}</b></li>

</ul>

抱歉!评论已关闭.