在电商网站产品页的制作过程中,图片放大的样式,很是流行。下面我们来介绍下这方面的小知识。如下图所示,是需要显示的图片:
HTML代码还是很简单的:
在写样式的时候,我们就需要思考下这个样式怎么去实现会方便点,如果下面的小图片是分开的话:
如这种的话,我们的li样式就可以直接设置间距,同时li的border也不会对整个ul的宽度造成影响。但是对
我们今天需要强调的样式而言,如果设置li的border的话,图片之间就会有有两个像素的border连在一起,不符合
我们的样式要求,这时候我们采取的方法是:
li设置border,需要设置margin-left的值是-1,这样的话,图片中间的border就会重叠,为了整个图片的位置保持不变,ul设置padding-left的
值是1px。居中显示,设置margin:0 auto。为了让鼠标悬浮在图片的时候边框会有显示,需要设置position:relative。这样的话,让其层级
居在其他的元素之上。