京東每日特價專欄仿寫

原創

2020-07-05 08:45

關於圖片素材，在京東官網（注意是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>

二、效果圖