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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .items{
            height: 450px;
            padding: 10px;
            background-color: bisque;
            box-sizing: border-box;
            float: left;
        }
        .items>div{
            width: 100%;
            height: 100%;
            background-color: cadetblue;
        }
        @media screen and (max-width: 768px){
            .items{
                width: 50%;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px) {
            .items{
                width: 33.33%;
            }
        }
        @media screen and (min-width: 768px){
            .items{
                width: 25%;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="items">11234564631</div>
    <div class="items">2</div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
</div>
</body>

老师为什么。items里的div没有变颜色呢

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS盒子模型 391楼

老师，这个color可以直接给li设置吗

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

placeholder属性和value 属性有什么区别么，我认为value属性也可以直接书写value="手机/邮箱/用户名"

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 393楼

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .white-nav{
            width: 100%;
            height: 100px;
            background-color: skyblue;
        }
        .logo{
            width: 55px;
            height: 55px;
            background-color: #ff6700;
            float: left;
            margin-top: 22.5px;
        }
    </style>
</head>
<body>
<div>
    <div class="white-nav">
        <div class="logo"></div>
        <div class="nav-bar"></div>
        <div class="search"></div>
    </div>
</div>

老师这里为什么要给.logo加浮动呢，如果不加呢

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

<style>
        .wrap{
            width: 1226px;
            height: 40px;
            background-color: #333333;
            font-size: 12px;
            color: #b0b0b0;
            margin: 0 auto;
        }
        .nav-left{
            float: left;
        }
        .nav-right{
            float: right;
        }
        li{
            float: left;
            list-style: none;
            position: relative;
        }
        span{
            margin: 0.3em;
            color: #424242;
            font-family: sans-serif;
        }
        .wrap>.nav-right>li:nth-child(-n+2){
            padding: 0 5px;
        }
        .wrap>.nav-right>li:nth-child(3){
            width: 48px;
            padding: 0 10px;
        }
        .wrap>.nav-right>li:nth-child(4){
            width: 120px;
        }
        .download{
            width: 124px;
            height: 0;
            background-color: #ffffff;
            box-shadow: 0 1px 5px #aaa;
            position: absolute;
            top: 40px;
            left: 50%;
            margin-left: -62px;
            overflow: hidden;
        }
        .download>img{
            width: 90px;
            height: 90px;
            margin: 10px 16px 8px;
        }
        .download>p{
            color: #333;
            font-size: 14px;
            line-height: 14px;
            text-align: center;
        }
        .nav-left>li:hover>.download{
            height: 148px;
            transition: all 0.2s;
        }
        .tri{
            width: 0;
            height: 0;
            border-bottom: 8px solid red;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            display: none;
        }
        .nav-left>li:hover>.tri{
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="nav-left">
            <li><a href="#"></a>小米商城<span>|</span></li>
            <li><a href="#"></a>MlUl<span>|</span></li>
            <li><a href="#"></a>loT<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><a href="#"></a>下载app<span>|</span>
                <div class="download">
                    <img src="images/小米app.jpg" height="109" width="112"/>
                    <p>小米商城APP</p>
                </div>
                <div class="tri"></div>
            </li>
            <li><a href="#"></a>智能生活<span>|</span></li>
            <li><a href="#"></a>Select Location</li>
        </ul>
        <ul class="nav-right">
            <li><a href=""></a>登录<span>|</span></li>
            <li><a href=""></a>注册<span>|</span></li>
            <li><a href=""></a>消息通知</li>
            <li><a href=""></a>购物车</li>
        </ul>
    </div>
</body>

问题1：.tri那里的left:50% margin-left:-8px不明白，不知道怎么找三角形的位移

问题2：为什么效果图里tri和download的位置不在一起

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

老师你好！为啥我的价格那一段不居中？其他的都居中。

Title.{
      : : : : }
    .{
      : : }
    {
      : }
    .{
      : : : : }
    .{
        : : : }
    .{
        : : : : }

  HUAWEI nova 95000¥2999

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5新增元素 396楼

老师在视频讲到用户名和密码框是行内元素，什么叫行内元素，

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 397楼

什么叫水平垂直平铺

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

老师他这个只有一个图层的怎么截图出来

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

问题一：黑色导航条没有显示出来
①HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>

    <!--引入图标和css全局样式-->
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/xiaomi.css">

</head>
<body>
<!--黑色导航开始-->
<div class="black-nav"></div>
<!--黑色导航结束-->
</body>
</html>

②css代码
<!--黑色导航开始-->
.black-nav{
    width:100%;
    height:40px;
    background-color: #333;
    line-height: 40px;
    font-size: 12px;
}
<!--黑色导航结束-->


老师 导入方式没有写错吧

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

老师好

请问视频中老师是用什么测量工具好方便的哦
我的火狐浏览器点击页面空白处没有一次性保存很多图片功能

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

/*购物车的样式*/
.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>

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

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

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

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

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

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

同学您好