边框紧挨的变色框制作

---

效果：

布局：
初学，布局很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;}