html+css3实现照片墙

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。body { font-family: Tahoma, Helvetica, '\5b8b\4f53', 'Arial', sans-serif; font-size: 12px; color: #fff; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0 }input, button, textarea { border: none 0 }fieldset, img { border: 0 }table { border-collapse: collapse; border-spacing: 0 }ul, ol { list-style: none }a:link { text-decoration: none }a:visited { text-decoration: none }a:hover { text-decoration: none }.clear { zoom: 1 }.clear:after { content: ''; display: block; clear: both }.polaroids { width: 970px; margin: 0 0 18px 10px; }.polaroids li { display: inline; }.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: 'Marker Felt', sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -o-box-shadow: 0 3px 6px rgba(0,0,0,.25); box-shadow: 0 3px 6px rgba(0,0,0,.25); }.polaroids img { display: block; width: 190px; margin-bottom: 12px; }.polaroids a:after { content: attr(title); }.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }.polaroids li:nth-child(3n) a { -webkit-transform: none; -moz-transform: none; -ms-transform: rotate(2deg); transform: none; position: relative; top: -5px; }.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); position: relative; right: 5px; }.polaroids li:nth-child(8n) a { position: relative; top: 8px; right: 5px; }.polaroids li:nth-child(11n) a { position: relative; top: 3px; right: -5px; }.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); -o-box-shadow: 0 3px 6px rgba(0,0,0,.5); box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); }

代码整体结构。

查看效果。