京东每日特价专栏仿写

关于图片素材,在京东官网(注意是www.jd.com不是global.jd.com)可以找到,找不到的话留言我私发给你。

一、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>京东每日特价</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .container {
        /*设置总体大小*/
        margin: 50px 200px;
        width: 400px;
        height: 600px;
        position: relative;
    }

    .top {
        height: 50px;
        /*顶部区域*/
    }

    .bland {
        /*每日特价*/
        color: black;
        font-weight: bold;
        width: 100px;
        float: left;
    }

    .top ul {
        float: left;
        width: 300px;
    }

    #tab li {
        /*五个菜单*/
        float: left;
        margin-right: 20px;
        color: #999;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
    }

    .on {
        /*下划线*/
        border-bottom: 2px solid red;
    }

    #content {
        /*存放所有图片*/
        height: 200px;
        width: 400px;
    }

    .pic {
        /*包含单个菜单的图片*/
        display: block !important;
        /*不加!important会失效*/
        height: 270px !important;
    }

    /* id的优先级大于class,!important的优先级最高 */
    #content>div {
        /*把每个菜单的图片隐藏起来*/
        display: none;
    }

    #content>div>div {
        float: left;
    }

    .left {
        width: 150px;
    }

    .mid,
    .right {
        width: 125px;
    }

    .mid img {
        height: 74px;
    }

    .right img {
        height: 74px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="top">
            <div class="bland">今日特价</div>
            <ul id="tab">
                <li class="on">精选</li>
                <li>数码</li>
                <li>美食</li>
                <li>百货</li>
                <li>预告</li>
            </ul>
        </div>
        <div id="content">
            <div class="pic">
                <div class="left">
                    <img src="images/left1.webp">
                </div>
                <div class="mid">
                    <img src="images/mid_1.webp">
                    <img src="images/mid_2.webp">
                </div>
                <div class="right">
                    <img src="images/right_1.webp">
                    <img src="images/right_2.webp">
                </div>
            </div>
            <div>
                <div class="left">
                    <img src="images/left2.webp">
                </div>
                <div class="mid">
                    <img src="images/mid_2_1.webp">
                    <img src="images/mid_2_2.webp">
                </div>
                <div class="right">
                    <img src="images/right_2_1.webp">
                    <img src="images/right_2_2.webp">
                </div>
            </div>
            <div>
                <div class="left">
                    <img src="images/left3.webp">
                </div>
                <div class="mid">
                    <img src="images/mid_3_1.webp">
                    <img src="images/mid_3_2.webp">
                </div>
                <div class="right">
                    <img src="images/right_3_1.webp">
                    <img src="images/right_3_2.webp">
                </div>
            </div>
            <div>
                <div class="left">
                    <img src="images/left4.webp">
                </div>
                <div class="mid">
                    <img src="images/mid_4_1.webp">
                    <img src="images/mid_4_2.webp">
                </div>
                <div class="right">
                    <img src="images/right_4_1.webp">
                    <img src="images/right_4_2.webp">
                </div>
            </div>
            <div>
                <div class="left">
                    <img src="images/left5.webp">
                </div>
                <div class="mid">
                    <img src="images/mid_5_1.webp">
                    <img src="images/mid_5_2.webp">
                </div>
                <div class="right">
                    <img src="images/right_5_1.webp">
                    <img src="images/right_5_2.webp">
                </div>
            </div>
        </div>
    </div>
    <script>
    var tabs = document.getElementById('tab').getElementsByTagName('li');
    // var pics=document.getElementById('content').getElementsByTagName('div');
    //这样会获取到所有div,并不只是第一层div
    var pics = document.getElementById('content').children;
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onmouseover = function() {
            change(this);
        }
    }

    function change(obj) {
        for (var i = 0; i < tabs.length; i++) {
            if (obj === tabs[i]) {
                tabs[i].className = 'on'; //给鼠标下的菜单加下划线
                pics[i].className = 'pic'; //将该菜单对应的图片显示出来
            } else {
                tabs[i].className = '';
                pics[i].className = '';
            }
        }
    }
    </script>
</body>

</html>

二、效果图

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值