多张需要放大的图片显示的样式技巧

    在电商网站产品页的制作过程中,图片放大的样式,很是流行。下面我们来介绍下这方面的小知识。如下图所示,是需要显示的图片:

HTML代码还是很简单的:

在写样式的时候,我们就需要思考下这个样式怎么去实现会方便点,如果下面的小图片是分开的话:

如这种的话,我们的li样式就可以直接设置间距,同时li的border也不会对整个ul的宽度造成影响。但是对

我们今天需要强调的样式而言,如果设置li的border的话,图片之间就会有有两个像素的border连在一起,不符合

我们的样式要求,这时候我们采取的方法是:

li设置border,需要设置margin-left的值是-1,这样的话,图片中间的border就会重叠,为了整个图片的位置保持不变,ul设置padding-left的

值是1px居中显示,设置margin:0 auto。为了让鼠标悬浮在图片的时候边框会有显示,需要设置position:relative。这样的话,让其层级

居在其他的元素之上。

原文地址:https://www.cnblogs.com/xuzhudong/p/6476477.html