SOURCE

<!-- 一张大图（一个正方形div里面，加padding）
+4张小图， 有透明的外边框，然后hover的时候回有黑色边框出现，防错位抖动-->

<!-- 总div+小div(一个是大图，一个是四张小图) -->
<!-- 类名为图片与信息，这一小节是图片。 -->
<div class="imgAndInfo">
    <!-- 类名为img在imgAndInfo里面 -->
    <div class="imgInimgAndInfo">
        <!-- 大图在外面,类名为大图，直接在html中标签中内联样式-->
        <img class="bigImg" src="http://how2j.cn/tmall/img/productSingle/8619.jpg" width="100px">
        <!-- 类名小图div，有4个小图，用inline-block或者float也可以 -->
        <div class="smallImgDiv">
            <!-- 图片类名一样。width比上面大图要小 -->
            <img class="smallImg" src="http://how2j.cn/tmall/img/productSingle_small/8620.jpg" width="56px">
            <img class="smallImg" src="http://how2j.cn/tmall/img/productSingle_small/8619.jpg" width="56px">
            <img class="smallImg" src="http://how2j.cn/tmall/img/productSingle_small/8618.jpg" width="56px">
            <img class="smallImg" src="http://how2j.cn/tmall/img/productSingle_small/8617.jpg" width="56px">  
            <img class="smallImg" src="http://how2j.cn/tmall/img/productSingle_small/8616.jpg" width="56px">
        </div>
    </div>

    <!-- 上面是图片，这里要添加一个清除浮动的方法,一般在完整项目的时候是很重要的 -->
    <div style="clear:both"></div>
</div>

/* 图片和基本信息所在的div（总div） */
div.imgAndInfo {
    margin: 40px 20px;/*上下40，左右20，看起来自然*/
}

/* 图片所在的div(我自己不知道加什么，但一般都是width，mairgin，height，padding，一般会是width，height) */
div.imgAndInfo div.imgInimgAndInfo {
    width: 400px;/*加width，因为完整页面，图片在左方，并且有固定宽度*/
    float: left;/*这里采用float漂浮，可以水平摆放，暂时没有右边的信息，不过其实在smallImg再加float，个人感觉也可以*/
}

/* 大图片 */
div.imgAndInfo div.imgInimgAndInfo img.bigImg {
    /*正方形，width=height*/
    width: 400px;
    height: 400px;
    /*内边距,border里面是padding+content,外面是margin,要想做出效果，就得加padding*/
    padding: 20px;
    border: 1px solid #F2F2F2; 
}

/* 小图片所在的div */
div.imgAndInfo div.imgInimgAndInfo div.smallImgDiv {
    /* margin:20px 40px;自己想到的， */
    width:80%;/*宽度不是百分百，上面div.imgInimgAndInfo，设置是400px，80%就是320px*/
    margin:20px auto;/*上面width:80%,宽度始终保持80%，并且加上外边距20px，居中，效果更好，
    在html中内联了width=56px,5*56=280 320-280=40px,刚好左右外边距各20px*/
}

/* 小图片 */
div.imgAndInfo div.imgInimgAndInfo div.smallImgDiv img.smallImg {
    /* width:80px;会换行。但是宽度依然是400px的80% */
    /* width:65px;会换行65*5=325px */
    /* width:61px;会换行65*5=305px */
    width:60px;/*60px*5=300px，再加1px,都会换行*/ 
    height:60px;/*正方形*/
    border: 2px solid white;/*白色border，看不出来有边框，hover换颜色会有效果，防抖*/
    /*border是2px的情况下，content的宽度是60-2*2=56px 高度60-2*2=56px，与html内联的样式一样*/
}

/* 小图片鼠标悬浮效果 */
div.imgAndInfo div.imgInimgAndInfo div.smallImgDiv img.smallImg:hover {
    border: 2px solid black;/*white-->black*/
}