有效沟通问答-【官方】百战程序员_IT在线教育培训机构

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 133730个问题

<!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常用属性 421楼

<!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>    <style>        /* position */        body{            height: 2000px;        }        .box{            width: 1000px;            height: 800px;            background-color: skyblue;            margin: 30px;        }        .one{            width: 300px;            height: 300px;            background-color: slateblue;            position: relative;            /* left: 30px;            bottom: -50px; */        }        .two{            width: 300px;            height: 300px;            background-color: teal;            position: relative;                   }        .one img{            width: 200px;            height: 200px;            margin: 30px;        }        span{            position: absolute;            left: 30px;            top: 30px;        }        a{            position: fixed;            bottom: 10px;            left: 10px;            width: 100px;            height: 100px;            background-color: tomato;           text-decoration: none ;            color: white;        }    </style></head><body><div class="box">    <div class="one"><img src="images/menu1.png" alt=""><span>lalalala</span></div>    <div class="two"></div>    <a href="#">返回页面顶部</a></div></body></html>老师为啥我在.one的div中插入一个图片 我图片如果不加外边距会不在.one的div外面  这个img不会跟着父元素的外边距而移动嘛

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 422楼

/老师你好我的放大镜不知道为什么不能显示出来呀？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 423楼

老师我没有群老师我没有群老师我没有群老师我没有群

WEB前端全系列/第一阶段：HTML5+CSS3模块/前端入门与基础知识 424楼

.cart-Details{display: none;transition:all 10s ease-in-out;}.cart:hover>.cart-Details{ display: block;}在购物车的下拉框实现过渡效果中用滑动门的思路为什么不能出现这个过渡的效果呢？能出现下拉框但是不是过渡的效果了

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 425楼

将橙色div隐藏用

display:none;

然后在鼠标悬停的css里写

.:>.{
     : ;
    : ;
    : ;
}

这样可以吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 426楼

<!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分视频可以撑开的

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 427楼

想问一下，<img /> 是/单标签之前说后面的斜杠可以不写这里的老师加了src的属性后就没有写斜杠结束了是因为单标签的斜杠可以不写吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 428楼

为什么mi-home mi-logo我这里找到的是个雪碧图？

http://nickyong.cn/MIUI/src/productList.html

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 429楼

HTML:
<!-- 79-小米.html     -->
<!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>小米</title>
    <link rel="stylesheet" href=".\css\reset.css">
    <link rel="icon" href=".\images\favicon.ico">
    <link rel="stylesheet" href=".\css\mi.css">

</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <a href="#"><img src=".\images\a2a9e6db5e3c5374301827435d8595c6.jpg" alt="照片无法显示"></a>
    </div>
    <!-- 头部结束 -->
    <!-- 黑色导航条 -->
    <div class="nav">
        <div class="wrap">
            <div class='left'>
                <ul>
                    <li><a href="#">小米商城</a><span>|</span></li>
                    <li><a href="#">MIUI</a><span>|</span></li>
                    <li><a href="#">IOT</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li class='download'><a href="#">下载App</a><span>|</span>
                        <div class="triangle"></div>
                        <div class='download-QRcode'>
                            <img src="./images/download.png" alt="无法显示">
                            <p>小米商城APP</p>
                        </div>
                    </li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                    <li><a href="#">智能手机</a><span>|</span></li>
                </ul>
            </div>
            <div class="right">
                <div class='user-info'>
                    <ul>
                        <li><a href="">登录</a></li>
                        <li><a href="">注册</a></li>
                        <li class='message'><a href="#">消息通知</a></li>

                    </ul>
                </div>
                <div class='shop-cart'>
                    <p><img src="" alt=""><span>购物车</span></p>
                    <div class='triangle'></div>
                    <div class="cart-list"></div>

                </div>
            </div>

        </div>

    </div>

</body>

</html>

CSS

body{
    background-color: blueviolet;
}
.header{
    width: 100%;
    height: 120px;
    /* overflow: hidden; */
    /* position: relative; */

}
.header img{
    height: 120px;
    margin: 0 auto;
    /* position: absolute;
    left: 50%;
    transform: translate(-50%);  */
}
.nav{
    width: 100%;
    height: 40px;
    background-color: #333333;
}
.wrap{
    height: 40px;
    width: 1226px;
    margin: 0 auto;
    /* background-color: pink; */
}
.wrap .left{
    /* width: 900px; */
    height: 40px;
    line-height: 40px;
    float: left;
    /* background-color: orange; */
}

.wrap .left>ul>li{
    /* width: 69px; */
    /* padding:0 5px; */
    float: left;
    
    box-sizing: border-box;
    text-align: center;
}
.wrap .left>ul>li>a{
    font-size: 12px;
    color: #a4a484;
}
.wrap .left>ul>li:hover>a{
    color: white;
}
.wrap .left span{
    margin: 0 3.6px;
}
.wrap .right{
    float: right;
    display: flex;
    justify-content: space-around;
}
.wrap .right .user-info{
    width:137px;
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    float: left;
    /* background-color: yellow; */
}
.wrap .user-info .message{
    margin: 0 10px;
}
/* .wrap .user-info>ul>li{
    /* float: left; */
/* .wrap .user-info>ul{
    justify-content:space-around ;
    display: flex;
} */
.user-info ul{
    display: flex;
    justify-content: space-between;
}
.wrap .user-info>ul>li>a{
   font-size: 12px;
   color: #a4a484;
   

}
.wrap .shop-cart{
    float: right;
    width: 120px;
    height: 40px;
    line-height: 40px;
    background-color:paleturquoise;
    position: relative;

}
.wrap .shop-cart:hover{
    background-color: white;
}
.wrap .shop-cart p{
    font-size: 12px;
    color: #a4a484;
}
.wrap .shop-cart .cart-list{
    width: 316px;
    height: 100px;
    background-color: white;
    position: absolute;
    bottom: -100px;
    left: -196px;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.wrap .shop-cart:hover>p{
    color: orange;
}
.wrap .shop-cart:hover .cart-list{
    display: block;

}
.download{
    
    /* width: 124px; */
    position: relative;
    transition: all .3s;
}
.download:hover>.download-QRcode{

    display: block;
}

.download:hover>.triangle{
    display: block;
}
.download .triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid white;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 42%;
    transform: translate(-8px);
    display: none;
    /* z-index: 999; */
}
.download .download-QRcode{
    width: 124px;
    height: 148px;
    position: absolute;
    top: 40px ;
    left: 50%;
    transform: translate(-62px);
    background-color: white;
    text-align: center;
    display: none;
    /* transition: all 10s; */
}
.download .download-QRcode img{
    width: 90px;
    margin: 18px 0 12px;
}
.download .download-QRcode p{
    position: relative;
    bottom: 26px;
    font-size: 14px;
}

老师我那个transition设置了all 0.3s为什么没有反应？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 430楼

老师，你是怎么知道那三角形是8px的？不太清楚在火狐或Chrome浏览器的调试窗口中怎么找到这个白色三角形的位置？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 431楼

老师，这个img 直接margin:0 auto不就居中了嘛，为什么还要transform跟absolute定位

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 432楼

老师您好，请问这个ps 2019cc是已经破解的吗？

https://mp.weixin.qq.com/s/ACJhJ9D5E6JiGGEThsNSsA

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 433楼

我觉得每台电脑的屏幕大小都不一样，会影响测量的准确度，我自己的解决方法是将一个网页打开，用F12测量实际的大小，再用自己的工具测量，将两个结果的比例求出来，进行网页缩放调整，例如我自己的工具就需要在页面缩放为67%的情况下才比较准确。

然后就是雪碧图的部分，可以先创建个div设置img在网页上打开，调到67%再用工具在上面进行测量，这样我测试过能更准地抓到想要的那部分的内容。

WEB前端全系列/第一阶段：HTML5+CSS3模块/浮动与定位 434楼

老师，你们的群在哪，我也想进来一起讨论。

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS选择器 435楼

同学您好