制作一个由5个100*100DIV组成的十字架（如➕），中间放一张icon（自己喜欢的64*64的小图片）在DIV里垂直水平居中，每一个DIV要有边框阴影尽量的让其漂亮。easyicon 可在此寻找对应的图片。
* { padding: 0; margin: 0; } .content { width: 300px; height: 300px; } .content .cross { width: 100px; height: 100px; -webkit-box-shadow: 5px 5px 5px rgba(172, 172, 172, .3); box-shadow: 5px 5px 5px rgba(172, 172, 172, .3); } .content .up { background: #c7ede9; margin: 0 auto; } .content .left { background: #5ca7ba; float: left; } .content .icon { background: url(../img/sun.png) no-repeat center center; float: left; } .content .right { background: #93e0ff; float: left; } .down { background: #afd7ed; clear: both; margin: 0 auto; } <div class="content"> <div class="cross up"></div> <div class="cross left"></div> <div class="cross icon"></div> <div class="cross right"></div> <div class="cross down "></div> </div>实现效果如下：
总结： 1、先看清搞懂需求； 2、尽量用最简单的方法解决问题； 3、不要眼高手低；
