zoukankan      html  css  js  c++  java
  • 锚点连接-点击圆点图片更换位置问题

        关于昨晚遇到的图片锚点连接问题,原本效果图应该是点击数字小圆点,然后图片切换到想要的图片,出现的问题时点击小圆点之后,图片上层的所有东西跟着图片一块上去了,
        解决办法,给图片外面在套一个标签,
        问题原因:图片上层的元素相对于最外面的元素绝对定位,但是图片是最外围元素的内容,虽然overflow:hidden;不显示,但是图片上去了,图片上层的元素相对定位也上去了。所以给图片加个外标签,这样子最外围元素的内容范围就固定了。
    源代码:
    <div class="main1">
            <div class="pict">
                <img id="banner1" src="images/banner1.jpg" alt="">
                <img id="banner2" src="images/banner2.jpg" alt="">
                <img id="banner3" src="images/banner3.jpg" alt="">
                <img id="banner4" src="images/banner4.jpg" alt="">
            </div>
            
            <ul>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
                <li><a href="#">手机 电话卡<i>&gt;</i></a></li>
            </ul>
            <div class="num">
                <a href="#banner1">1</a>
                <a href="#banner2">2</a>
                <a href="#banner3">3</a>
                <a href="#banner4">4</a>
            </div>
            <em class="arrow Larrow">&lt;</em><em class="arrow Rarrow">&gt;</em>
        </div>
    .main1{height:460px;position:relative;overflow:hidden;}
    .main1 .pict{height:460px;overflow:hidden;}
    .main1 .pict img{1226px;height:460px;display:block;}
    .main1 ul{height:420px;232px;float:left;background:#000;opacity:0.5;padding:20px 0;position:absolute;top:0;left:0;z-index: 9;}
    .main1 ul li a{font:14px/1.5 "Helvetica Neue","Microsoft Yahei";color:#fff;display:inline-block;text-align: left;height:42px; line-height:42px;182px;padding:0 20px 0 30px;}
    .main1 ul li a i{float:right;font:16px "宋体";line-height: 42px;font-weight:bolder;}

  • 相关阅读:
    React.Fragment
    微信分享
    视频H5 video标签最佳实践
    详解vue2.0+vue-video-player实现hls播放全过程
    call()和appl()的理解
    JS 原生面经从初级到高级
    vue面试
    面试题2
    IdentityServer4 实现 OpenID Connect 和 OAuth 2.0
    DDD关键知识点整理汇总
  • 原文地址:https://www.cnblogs.com/qinghao-qin/p/9417461.html
Copyright © 2011-2022 走看看