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


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

    HTML代码还是很简单的:

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

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

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

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

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

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

    居在其他的元素之上。

  • 相关阅读:
    前端开发-模块化开发框架RequireJS-1 初识requirejs
    需整理
    SSM
    iomanip
    new与delete使用方法
    分析setting源代码获取sd卡大小
    第一次正式小用Redis存储
    blob storage第一次亲密接触
    第一次使用ashx,被震惊
    Redis中的异步Async
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6476477.html
Copyright © 2020-2023  润新知