会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133328个问题
WEB前端全系列/第一阶段:HTML5+CSS3模块/表单 406楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 407楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 408楼

/*购物车的样式*/
.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新特性 411楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css1/reset.css">
    <style>
        .box{
            box-sizing: border-box;
            width: 234px;
            height: 320px;
            padding: 20px 0;
            position: relative;
            text-align: center;
            background-color: coral;
            margin: 10px;
        }
        .box img{
            width: 80px;
            height: 160px;
            position: absolute;
            top: 21px;
            left: 77px;


        }
        .box>img:first-child{
            z-index: 10;
        }
        .box2{
            position: absolute;
            top:204px;
            background-color: yellow;
            width: 100%;
            height: 102px;
            text-align: center;
        }
        p{margin-bottom: 1px ;
      }
      .box2>p:last-child{
          margin-top: 10px;
      }

      .box:hover>img:first-child{
          left:40px
      }
      .box:hover>img:last-child{
       left:114px
      }
    </style>
</head>
<body>
   
<div class="box">
    <img src="images/position练习3.jpg" alt="">
    <img src="images/22.jpg" alt="" class="i2">
       <div class="box2">
          <p>黑鲨4S</p>
          <p>磁动力升降肩键</p>
          <p>2699元起</p>

    </div>
</div>
</body>
</html>

老师为啥用这个 last-child选择器不生效  用类选择器.i2就会生效?  要有三个img才可以使用last-child嘛?

.box:hover>img:last-child{
       left:114px
      }


WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 412楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 414楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 415楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
   <table  wdith='500px' height='400' border="1">
       <caption>单元格的属性</caption>
       <tr>
           <td>111111111111</td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
   </table>
</body>
</html>

老师 为啥我没有内容  单元格撑不开?  我看22分视频可以撑开的

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 418楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 420楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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