<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
<li><a href=<"#"<><img src=<"http://placehold.it/150×150" /></a></li>
</ul>
</div>
/p>
以下是css代码：
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
div {
width: 900px;
margin: 0 auto;
overflow: auto;
}
ul {
list-style-type: none;
}
li img {
float: left;
margin: 10px;
border: 5px solid #fff;
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}
li img:hover {
-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}
这里的重点是给每张图片加上一定的margin然后向左浮动，然后用over-flow:auto清除浮动（为保险起见，用了浮动之后一定要清除浮动）。给整个网格添加黑色背景，给每张图片加上边框。为了让网格更有趣，我加上了一个鼠标画上去显示发光的效果。你可以选择性的使用，不必将这个效果用在每一个项目中。
4.水平菜单 Horizontal Menu
在这里查看demo和源码 CodePen.
html代码：
<nav>
<ul>
<li><a href=<"#"<>Home</a></li>
<li class=<"active"<><a href=<"#"<>About</a></li>
<li><a href=<"#"<>Portfolio</a></li>
