会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132604个问题
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 25066楼
JAVA 全系列/(旧的隐藏)第七阶段:JAVA 高级技术/Solr 25067楼
JAVA 全系列/第八阶段:Linux入门到实战/Linux(旧) 25068楼
Python 全系列/第十九阶段:数据分析-数据管理/numpy 25069楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 25070楼
JAVA 全系列/第八阶段:Linux入门到实战/Maven 25071楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 25072楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 25075楼

/*购物车的样式*/
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    /*来给父元素cart价格相对定位*/
    position: relative;
}
/*点击购物车的时候会从上往下出现一个下拉框  可以利用过渡transition来实现*/
.cart-Details{
    width: 315px;
    height:0;
    background-color: #ffffff;
    /*这里是给个盒阴影*/
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    /*这个下拉框是独立的一层 要用绝对定位定过来*/
    position: absolute;
    /*相对于已经定位的父元素来定位  来给父元素:cart价格相对定位*/
    /*在父元素的正下方紧贴父元素的bottom  所以距离父元素的top的距离就是父元素的height  而右边和父元素的右边没有距离*/
    top: 40px;
    right: 0;
    /*这里的颜色是  购物车中还没有商品,赶紧选购吧! 的颜色*/
    color: #424242;
    /*没有鼠标悬停触发时 高度要为0 这样这个下拉框在没有触发时便不显示*/
    /*但是“购物车中还没有商品,赶紧选购吧!”的文字还在 所以溢出的部分需要隐藏*/
    overflow: hidden;
    /*等触发事件发生时高度出现 下拉框就会出现了*/
    /*在这里是不可以用display的 因为要实现过渡效果的话 transition对display是无效的 */
    /*display: none;*/
    transition:all 0.3s ease-in-out;
}
<li class="cart">
    <a href="#">购物车</a>
    <div class="cart-Details">
        购物车中还没有商品,赶紧选购吧!
    </div>
</li>

1635239344(1).jpg老师,白色导航部分写完了 ,但是之前写的购物车下拉框在点击后显示,这个地方被白色导航内的搜索框覆盖了,不能完整展示,这应该怎么办呀?购物车下拉框定位的父元素是购物车

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 25077楼
Python 全系列/第一阶段:Python入门/编程基本概念 25078楼
Python 全系列/ 第十四阶段:自动化操作办公软件、邮件、定时任务等/自动化操作办公软件、邮件、定时任务等 25079楼
Python 全系列/第一阶段:Python入门/编程基本概念 25080楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637