这个网格布局效果中每行的图片数量会根据屏幕的宽度自动调整，并在鼠标滑过时带有一些文本动画效果。
HTML结构:
1 <ul class="cbp-ig-grid"> 2 <li> 3 <a href="#"> 4 <span class="cbp-ig-icon cbp-ig-icon-shoe"></span> 5 <h3 class="cbp-ig-title">Squid voluptate</h3> 6 <span class="cbp-ig-category">Fashion</span> 7 </a> 8 </li> 9 <li> 10 <a href="#"> 11 <span class="cbp-ig-icon cbp-ig-icon-ribbon"></span> 12 <h3 class="cbp-ig-title">Mixtape lo-fi</h3> 13 <span class="cbp-ig-category">Design</span> 14 </a> 15 </li> 16 <li> 17 <a href="#"> 18 <span class="cbp-ig-icon cbp-ig-icon-milk"></span> 19 <h3 class="cbp-ig-title">Cosby sweater</h3> 20 <span class="cbp-ig-category">Lifestyle</span> 21 </a> 22 </li> 23 <li> 24 <a href="#"> 25 <span class="cbp-ig-icon cbp-ig-icon-whippy"></span> 26 <h3 class="cbp-ig-title">Commodo</h3> 27 <span class="cbp-ig-category">Food</span> 28 </a> 29 </li> 30 <li> 31 <a href="#"> 32 <span class="cbp-ig-icon cbp-ig-icon-spectacles"></span> 33 <h3 class="cbp-ig-title">Bitters kitsch</h3> 34 <span class="cbp-ig-category">Gadgets</span> 35 </a> 36 </li> 37 <li> 38 <a href="#"> 39 <span class="cbp-ig-icon cbp-ig-icon-doumbek"></span> 40 <h3 class="cbp-ig-title">Austin proident</h3> 41 <span class="cbp-ig-category">Music</span> 42 </a> 43 </li> 44 </ul>
CSS样式：
有了上面的html结构，剩下的工作就是添加css样式了。
1 @font-face { 2 font-family: 'anyoldicon'; 3 src:url('../fonts/anyoldicon/anyoldicon.eot'); 4 src:url('../fonts/anyoldicon/anyoldicon.eot?#iefix') format('embedded-opentype'), 5 url('../fonts/anyoldicon/anyoldicon.woff') format('woff'), 6 url('../fonts/anyoldicon/anyoldicon.ttf') format('truetype'), 7 url('../fonts/anyoldicon/anyoldicon.svg#anyoldicon') format('svg'); 8 font-weight: normal; 9 font-style: normal; 10 } 11 12 /* General grid styles */ 13 .cbp-ig-grid { 14 list-style: none; 15 padding: 0 0 50px 0; 16 margin: 0; 17 } 18 19 /* Clear floats */ 20 .cbp-ig-grid:before, 21 .cbp-ig-grid:after { 22 content: " "; 23 display: table; 24 } 25 26 .cbp-ig-grid:after { 27 clear: both; 28 } 29 30 /* grid item */ 31 .cbp-ig-grid li { 32 width: 33%; 33 float: left; 34 height: 420px; 35 text-align: center; 36 border-top: 1px solid #ddd; 37 } 38 39 /* we are using a combination of borders and box shadows to control the grid lines */ 40 .cbp-ig-grid li:nth-child(-n+3){ 41 border-top: none; 42 } 43 44 .cbp-ig-grid li:nth-child(3n-1), 45 .cbp-ig-grid li:nth-child(3n-2) { 46 box-shadow: 1px 0 0 #ddd; 47 } 48 49 /* anchor style */ 50 .cbp-ig-grid li > a { 51 display: block; 52 height: 100%; 53 color: #47a3da; 54 -webkit-transition: background 0.2s; 55 -moz-transition: background 0.2s; 56 transition: background 0.2s; 57 } 58 59 /* the icon with pseudo class for icon font */ 60 .cbp-ig-icon { 61 padding: 30px 0 0 0; 62 display: block; 63 -webkit-transition: -webkit-transform 0.2s; 64 transition: -moz-transform 0.2s; 65 transition: transform 0.2s; 66 } 67 68 .cbp-ig-icon:before { 69 font-family: 'anyoldicon'; 70 font-size: 14em; 71 speak: none; 72 font-style: normal; 73 font-weight: normal; 74 font-variant: normal; 75 text-transform: none; 76 line-height: 1; 77 -webkit-font-smoothing: antialiased; 78 } 79 80 .cbp-ig-icon-shoe:before { 81 content: "e000"; 82 } 83 84 .cbp-ig-icon-ribbon:before { 85 content: "e001"; 86 } 87 88 .cbp-ig-icon-milk:before { 89 content: "e002"; 90 } 91 92 .cbp-ig-icon-whippy:before { 93 content: "e003"; 94 } 95 96 .cbp-ig-icon-spectacles:before { 97 content: "e004"; 98 } 99 100 .cbp-ig-icon-doumbek:before { 101 content: "e007"; 102 } 103 104 /* title element */ 105 .cbp-ig-grid .cbp-ig-title { 106 margin: 20px 0 10px 0; 107 padding: 20px 0 0 0; 108 font-size: 2em; 109 position: relative; 110 -webkit-transition: -webkit-transform 0.2s; 111 -moz-transition: -moz-transform 0.2s; 112 transition: transform 0.2s; 113 } 114 115 .cbp-ig-grid .cbp-ig-title:before { 116 content: ''; 117 position: absolute; 118 background: #47a3da; 119 width: 160px; 120 height: 6px; 121 top: 0px; 122 left: 50%; 123 margin: -10px 0 0 -80px; 124 -webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */ 125 -moz-transition: margin-top 0.2s; 126 transition: margin-top 0.2s; 127 } 128 129 .cbp-ig-grid .cbp-ig-category { 130 text-transform: uppercase; 131 display: inline-block; 132 font-size: 1em; 133 letter-spacing: 1px; 134 color: #fff; 135 -webkit-transform: translateY(10px); 136 -moz-transform: -moz-translateY(10px); 137 -ms-transform: -ms-translateY(10px); 138 transform: translateY(10px); 139 opacity: 0; 140 -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; 141 -moz-transition: -moz-transform 0.3s, opacity 0.2s; 142 -webkit-transition: transform 0.3s, opacity 0.2s; 143 } 144 145 .cbp-ig-grid li:hover .cbp-ig-category, 146 .touch .cbp-ig-grid li .cbp-ig-category { 147 opacity: 1; 148 -webkit-transform: translateY(0px); 149 -moz-transform: translateY(0px); 150 -ms-transform: translateY(0px); 151 transform: translateY(0px); 152 } 153 154 /* Hover styles */ 155 156 .cbp-ig-grid li > a:hover { 157 background: #47a3da; 158 } 159 160 .cbp-ig-grid li > a:hover .cbp-ig-icon { 161 -webkit-transform: translateY(10px); 162 -moz-transform: translateY(10px); 163 -ms-transform: translateY(10px); 164 transform: translateY(10px); 165 } 166 167 .cbp-ig-grid li > a:hover .cbp-ig-icon:before, 168 .cbp-ig-grid li > a:hover .cbp-ig-title { 169 color: #fff; 170 } 171 172 .cbp-ig-grid li > a:hover .cbp-ig-title { 173 -webkit-transform: translateY(-30px); 174 -moz-transform: translateY(-30px); 175 -ms-transform: translateY(-30px); 176 transform: translateY(-30px); 177 } 178 179 .cbp-ig-grid li > a:hover .cbp-ig-title:before { 180 background: #fff; 181 margin-top: 80px; 182 } 183 184 185 @media screen and (max- 62.75em) { 186 .cbp-ig-grid li { 187 width: 50%; 188 } 189 190 /* reset the grid lines */ 191 .cbp-ig-grid li:nth-child(-n+3){ 192 border-top: 1px solid #ddd; 193 } 194 195 .cbp-ig-grid li:nth-child(3n-1), 196 .cbp-ig-grid li:nth-child(3n-2) { 197 box-shadow: none; 198 } 199 200 .cbp-ig-grid li:nth-child(-n+2){ 201 border-top: none; 202 } 203 204 .cbp-ig-grid li:nth-child(2n-1) { 205 box-shadow: 1px 0 0 #ddd; 206 } 207 } 208 209 @media screen and (max- 41.6em) { 210 .cbp-ig-grid li { 211 width: 100%; 212 } 213 214 .cbp-ig-grid li:nth-child(-n+2){ 215 border-top: 1px solid #ddd; 216 } 217 218 .cbp-ig-grid li:nth-child(2n-1) { 219 box-shadow: none 220 } 221 222 .cbp-ig-grid li:first-child { 223 border-top: none; 224 } 225 } 226 227 @media screen and (max- 25em) { 228 .cbp-ig-grid { 229 font-size: 80%; 230 } 231 232 .cbp-ig-grid .cbp-ig-category { 233 margin-top: 20px; 234 } 235 }
css样式代码不多，也不难看懂，这样一个简单的网格布局就做好了。
本教程就到这里，希望对你有所帮助。