前端小练————html做一个伪切换页面

最新推荐文章于 2024-06-18 11:32:20 发布

枫玄雾隐

最新推荐文章于 2024-06-18 11:32:20 发布

阅读量593

点赞数 3

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_45293340/article/details/126022697

版权

今天做天猫国际首页的时候，遇到一个点击切换页面的小页面，现有知识好像无法解决，就只能写一个简易的伪页面来完善一下页面

具体就是通过hover来改变页面

但是发现无法做到点击圆点按钮才切换，因为下一张图片的父元素必然包含下一张图片，从而造成了点击突破也能切换的效果，不过可以做一个圆点来伪装一下，虽功能尚有欠缺但也能满足基本需求

下面是代码

html


<div class="all">
    <div class="yuan1"></div>
        <div class="l-font">BRAND <span> 美容护肤热卖平牌</span>
            <div>
                  <ul>
                  <li id="a">
                             <div class="yuan"></div>
                                        <ul class="c">
                                            <li class="item1c"><a href=""><img src="./img/名牌1.png" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                            <li class="item1c"><img src="./img/名牌1.png" alt="">
                                                <div class="hg">
                                                    韩国LG旗下彩妆
                                                </div><a href=""></a>
                                            </li>
                                        </ul>

                                        <ul class="b">
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                            <li class="itemc"><a href=""><img src="./img/名牌2.jpg" alt="">
                                                    <div class="hg">
                                                        韩国LG旗下彩妆
                                                    </div>
                                                </a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

css部分代码

.all {
    height: 475px;
    width: 279px;
    border: 1px solid #E8E8E8;
    margin: 0 auto;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left:951px;
    z-index: 99;
}



.itemc,.item1c {
    height: 87px;
    width: 130px;
    float: left;
    margin: 3px;
    
}
.itemc{
   background-color: #FFFFFF;
  visibility: hidden;
    z-index: 99;
}
.b,.c{
    position: absolute;
    height: 260px;
    width: 260px;
    border-radius: 5px;
    
}
.item1c{
    background-color: #FFFFFF;
}
#a:hover .itemc {
    visibility: visible;
    transition: 1s;
}
.yuan,.yuan1{
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 5px;
    position: absolute;
    top: 450px;
    left: 150px;
}
.yuan1{
    left: 120px;
}
.b,.c{
    padding: 0px;
    width: 279px;margin-left: -21px;
    margin-top: -10px;

}
.l-font{
    font-size: 22px;
    color: #999;
    /* background-color: red; */
   line-height: 41px;
   width: 256px;
   text-align: center;
   margin-left: 10px;
   border-bottom: 1px solid #737373;
}
.l-font span{
    font-size: 18px;
    color: #999;
}
.item1c img{
    width: 90px;
}
.hg{
    background-color: #EDEDED;
    width: 130px;
    color: #737373;
}
.itemc img{
    width: 90px;
}

效果图如下

——————》