图片的列表展示
html代码如下：
?
<html> <head> <link href="style.css" rel="stylesheet"/> </head> <body> <div id="page-wrap"> <div id="bsap_1235262"> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" src="images/1.png"/> </a> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" src="images/2.jpg"/> </a> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" src="images/3.jpg"/> </a> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" src="images/4.png"/> </a> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" src="images/5.png"/> </a> <a target="_blank" title="google" href="http://google.cn"> <img height="125" width="125" alt="图片的列表显示" 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; }?
示例效果：
?
