CSS 做京东首页购物车思路

默认状态

指针指向时

代码：

<!-- 模仿京东购物车 -->



<style>
    * {
        padding: 0;
        margin: 0;
    }

    /* 框架定位 */
    body {
        padding-left: 300px;
        padding-top: 200px;
    }

    article {
        /* 设置宽度 */
        width: 150px;
        /* 设置相对定位为下面第二个div定位使用 */
        position: relative;
        /* 字体属性 */
        color: #555555;
        font-size: 14px;
        /* 设置指针手势 */
        cursor: pointer;
        /* 设置高度 */
        height: 50px;
    }

    article div {
        /* 对每个div设置边框 */
        border: solid 1px #dddddd;
        /* 文字设置 */
        text-align: center;
        line-height: 3.5em;
    }

    /* 对购物车内容显示设置 */
    article div:nth-of-type(1) {
        /* 设置边框内背景颜色与页面背景颜色一致 */
        /* 否则具体内容的上边框会显示出来 */
        background: #ffffff;
        /* 设置相对位置为了z-index能生效 */
        position: relative;
        /* 层数优先级 */
        z-index: 2;
    }

    /* 对购物车具体内容显示设置 */
    article div:nth-of-type(2) {
        /* 设置宽度 */
        width: 300px;
        /* 设置绝对定位 */
        position: absolute;
        /* 实现与上面购物车三个字边框右对齐 */
        right: 0;
        /* 设置整体框往上偏移一点为后面消除购物车下边框用 */
        top: 49px;
        /* 设置隐藏 */
        display: none;
    }

    /* 设置指向“购物车”时显示样式 */
    article:hover div:nth-of-type(1) {
        /* 去掉下边框使其看起来像是一个区域 */
        border-bottom: none;
    }

    /* 显示购物车具体内容 */
    article:hover div:nth-of-type(2) {
        display: block;
    }
</style>



<article>
    <div>购物车</div>
    <div>该购物车尚未有商品</div>
</article>