鍍金池/ 問答/HTML5  HTML/ 京東 我的購物車 css如何實現(xiàn)

京東 我的購物車 css如何實現(xiàn)

圖片描述

主要問題是， 彈出框的上邊框如何隱藏一部分，我的想法是， 在彈出時， 設置‘我的購物車’所在的邊框的底邊框為0，調(diào)整z-index， 使‘我的購物車’所在的框覆蓋到下面的邊框， 從而實現(xiàn)這種效果， 但是不行， 不知道各位有沒有好的解決辦法。 謝謝啦

回答
編輯回答
朕略傻

圖片描述

你好，我的思路如下，有不清楚的歡迎交流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box{
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
        position: relative;
    }
    .box:after{
        content: "";
        height: 1px;
        width: 100%;
        background-color: #fff;
        position: absolute;
        bottom: -1px;
        left: 0;
        display: none;
    }
    .con{
        height: 100px;
        width: 300px;
        border: 1px solid #ccc;
        display: none;
        position: absolute;
        left: -1px;
    }
    .box:hover:after{
        display: block;
    }
    .box:hover .con{
        display: block;
    }
    </style>
</head>
<body>
    <div class="box">
        <span>我的購物車</span>
        <div class="con">
            購物車的內(nèi)容
        </div>
    </div>
</body>
</html>
2018年2月22日 08:45
編輯回答
尕筱澄

emmm，典型的前端騙術，根本就沒有你說的要隱藏的部分，它本身就是在一個盒子下的兩個盒子，但是通過css讓你看上去他們是聯(lián)在一起的，
思路的話，無非就是上邊的盒子在觸發(fā)的時候，改變邊框樣式，下邊兒的盒子定位在他距離底部1px的位置，并提高3維顯示層級，看上去的話，就變成了聯(lián)在一起的樣子了。
套路就是這樣，直接給你代碼，我覺得對你沒啥好處，23333

2017年7月23日 16:54
編輯回答
骨殘心

你可以直接打開開發(fā)者工具看他怎么寫的。

2017年10月19日 23:41