边框紧挨的变色框制作

边框紧挨的变色框制作

---

效果：

布局：
初学，布局很low

<div class="introTopLeft">
    <div class="largePic"><img src="images/goods/pad.png" ></div>
    <div class="littlePic">
        <a href="#" class="active"><img src="images/goods/pad.png"></a>
        <a href="#" ><img src="images/goods/pad.png"></a>
        <a href="#" ><img src="images/goods/pad.png"></a>
        <a href="#" ><img src="images/goods/pad.png"></a>
        <a href="#" ><img src="images/goods/pad.png"></a>
    </div>
</div>      

思路：
基于盒子模型的概念，当padding、margin、border都不设置的时候，他们应该位置是和内容重合的。

方式一：
**********2017.3.4更新**********

//设置整个的宽高，并绘制它的边框，但是不绘制右边。
.littlePic{width:264px;height:52px;float:left;border:1px solid #b1b1b1;border-right: none;}
//设置每一小块的大小，并绘制它的右边框
.littlePic a{line-height:52px;width:52px;height:52px; display: inline-block;float:left; border-right:1px solid #b1b1b1;text-align: center;}
.littlePic img{width:35px;height:52px}
//当选中时，状态class为active，则绘制选中的这个的边框，但这样会出现两个边框并列的情况，那就需要设置它的margin为-1px，内缩一个像素,也就是将外边距的与边框内边缘重合了，因为两个元素之前的距离是由margin位置绝抵不过的
.littlePic .active{border:1px solid #317ee7;margin:-1px;}