小米商城广告部分

最新推荐文章于 2024-11-16 22:34:09 发布

Moerin_

最新推荐文章于 2024-11-16 22:34:09 发布

阅读量111

点赞数

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/Moerin_/article/details/126591984

版权

 <div class="banner">
        <div class="banner-wrap">
            <div class="banner-left">
                <ul>
                    <li>
                        <a href="">
                            <img src="./image/小图标1.png" alt="">
                            <p>保障服务</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./image/小图标2.png" alt="">
                            <p>企业团购</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./image/小图标3.png" alt="">
                            <p>F码通道</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./image/小图标4.png" alt="">
                            <p>米粉卡</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./image/小图标5.png" alt="">
                            <p>以旧换新</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./image/小图标6.png" alt="">
                            <p>话费充值</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="banner-right">
                <a href=""><img src="./image/底部1.jpg" alt=""></a>
            </div>
            <div class="banner-right">
                <a href=""><img src="./image/底部2.jpg" alt=""></a>
            </div>
            <div class="banner-right">
                <a href=""><img src="./image/底部3.jpg" alt=""></a>
            </div>
        </div>
    </div>

css部分

.banner{
    width: 100%;
    height: 170px;
    margin: 14px 0 26px;
}
.banner-wrap{
    width: 1226px;
    height: 170px;
    margin: 0 auto;
    /* background-color: skyblue; */
}
.banner-left{
    float: left;
    width: 234px;
    height: 170px;
    padding: 3px;
    box-sizing: border-box;
    background-color: #5f5750;
}
.banner-right{
    float: left;
    margin-left: 14.6px;
    width: 316px;
    height: 170px;
    /* background-color: pink; */

}
.banner-right img{
    width: 316px;
    height: 170px;
}
.banner-right img:hover{
    box-shadow: 0 15px 30px rgba(0, 0, 0, .3);
}
.banner-left>ul li{
    position: relative;
    float: left;
    width: 76px;
    height: 82px;
    margin-bottom: 4px;
    text-align: center;
    padding: 19px 0;
    box-sizing: border-box;
    transition: all .2s;
}
.banner-left>ul>li>a>img{
    width: 24px;
    height: 24px;
    opacity: .5; 
}
.banner-left>ul>li>a>p{
    margin-top: 5px;
}
.banner-left>ul>li:hover>a>img{
    opacity: 1;
}  
.banner-left>ul>li>a{
    font-size: 12px;
    color: #b0b0b0;
}
.banner-left>ul>li:hover>a{
    color: #fff;
}
/* 横线 */
.banner-left>ul li:not(li:last-child,li:nth-child(5),li:nth-child(4)):after{
    position: absolute;
    bottom: 0;
    left: 6px;
    content:"" ;
    height: 1px;
    width: 64px;
    background-color:#b0b0b0;
}
/* 竖线 */
.banner-left>ul li:not(li:nth-child(3),li:nth-child(6)):before{
    position: absolute;
    top: 6px;
    right: 0;
    content: "";
    width: 1px;
    height: 70px;
    background-color: #b0b0b0;
}