图片的列表展示

html代码如下:

 

<html>
  <head>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="page-wrap">
      <div class="bsap_1235262 bsap" id="bsap_1235262">
        <a target="_blank" title="google" class="ad1 odd" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/1.png"/>
        </a>
        <a target="_blank" title="google" class="ad2 even" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/2.jpg"/>
        </a>
        <a target="_blank" title="google" class="ad3 odd" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/3.jpg"/>
        </a>
        <a target="_blank" title="google" class="ad4 even" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/4.png"/>
        </a>
        <a target="_blank" title="google" class="ad5 odd" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/5.png"/>
        </a>
        <a target="_blank" title="google" class="ad6 even" href="http://google.cn">
          <img height="125" width="125" alt="google" src="images/6.png"/>
        </a>
      </div>
    </div>
  </body>
</html>

 

样式如下:

 

* { margin: 0; padding: 0; }
html { overflow-y: scroll; background: #d9d3cf; }
body { font: 18px/1.5 "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, serif; text-rendering: optimizeLegibility; }

#page-wrap { width: 330px; margin: 20px auto 30px; }

div.bsap_1235262{width:100%;display:block}
div.bsap_1235262 a{width:125px;display:block;float: left;}
div.bsap_1235262 a img{padding:0;border:0;clear:right;}

#bsap_1235262 a { padding: 15px; margin: 0 20px 20px 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-border-top-left-radius: 80px; -webkit-border-bottom-right-radius: 80px; -moz-border-radius-topleft: 80px; -moz-border-radius-bottomright: 80px; border-top-left-radius: 80px; border-bottom-right-radius: 80px; }
#bsap_1235262 a:hover { -webkit-border-top-left-radius: 40px; -webkit-border-bottom-right-radius: 40px; -moz-border-radius-topleft: 40px; -moz-border-radius-bottomright: 40px; border-top-left-radius: 40px; border-bottom-right-radius: 40px; }
#bsap_1235262 a img { -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.5); box-shadow: 0 0 8px rgba(0,0,0,0.5); padding: 3px; }
#bsap_1235262 .even { margin-right: 0; }
#bsap_1235262 .ad1 { background: #e42b2b; }
#bsap_1235262 .ad2 { background: #ff8400; }
#bsap_1235262 .ad3 { background: #a800ff; }
#bsap_1235262 .ad4 { background: #49a7f3; }
#bsap_1235262 .ad5 { background: #41d05f; }
#bsap_1235262 .ad6 { background: #e42b2b; }

 

示例效果:

 

图片的列表展示

你可能感兴趣的:(html,css,Google,webkit)