有效沟通问答-【官方】百战程序员_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盒子模型 259楼

<style>

.first+.border{

color:red;

}

</style>

<div>

<ul>

</ul>

</div>

为什么这样子不生效 .border的元素不会改变颜色

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

老师啊这个彩色的为啥出来是个黑球

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS应用技巧 261楼

<a href="#" target="_blank">带有target属性</a>

<p class="text">带有属性text属性</p>

为什么这里target等于后面要带下划线blank，我试了不带这个下划线，显示的结果一样的，而下面的class等于等于后面就不需要下划线

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

.sanjiao{

border-left: 8px solid #fff;

border-top: 6px solid transparent;

border-bottom: 6px solid transparent;

width: 0;

height: 0;

margin: 3px auto;
}

老师，设置左边三角，不用写border-right: 6px solid transparent;吗？

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 263楼

问题1：对第9个图片上第三行文字进行绝对定位时，为什么设置left为0，文字是整体靠左对齐?设置left为92px时文字才处于相对居中位置，而前两行文字和第1，5个图片上所有文字均是设置left为0来实现文字整体居中的。

<!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>
        .box{
            width:100%;
            height:1155px;
        }
        .wrap{
            width:1240px;
            height:1155px;
            margin:0 auto;
        }
        /* 给img1，5，9的父元素设置相对定位 */
        .wrap-x{
            position:relative;
        }
        .wrap>div{
            width:303px;
            height:375px;
            float:left;
            margin-top:10px;
            margin-right:9px;
            background-color:gainsboro;
            /* 图片居中设置，用margin:0 auto;会和外边距设置冲突
            只显示水平居中，不显示外边距 */
            text-align:center;
        }
        .wrap>div:nth-child(4n){
            margin-right:0;
        }
        img{
            width:230px;
            height:230px;
        }
        .imgs{
            width:100%;
            height:100%;
        }
        /* 给img1，5，9上的文字进行绝对定位，使之出现在图片上 */
        .name{
            width:303px;
            height:31.33px;
            position:absolute;
            top:220px;
            left:0;
            color:#FFFFFF;
            font-size:21px;
            font-weight:700;
            margin-bottom:0;
        }
        .desc{
            width:303px;
            height:20.67px;
            position:absolute;
            top:260px;
            left:0;
            color:#ffffff;
            font-size:14px;
        }
        .price{
            width:82.06px;
            height:36px;
            position:absolute;
            top:280px;
            left:100px;
            color:#ebce6b;
            font-size:24px; 
            font-weight:700;
        }
        .original1{
            font-size:14px;
            font-weight:700;
            color:#ffffff;
            text-decoration:line-through;
            margin-left:4px;
        }
        .goods-name{
            width:303px;
            height:24px;
            color: #333333;
            font-size:16px;
            margin:0 0 2px;
        }
        .goods-desc{
            width:303px;
            height:20.67px;
            color:#999999;
            font-size:14px;
        }
        /* 为什么设置第三个P标记里的价格字体不生效?但P嵌套的span标记设置的字体却能生效？ */
        .goods-price{
            /* width:58.71px; */
            /* height:32.67px; */
            color:#CC0000;
            font-size:22px;
            padding:0 0 0 14px;
        }
        a{
            text-decoration:none;
        }
        span{
            width:14px;
            height:20.67px;
            color:#CC0000;
            font-size:14px;
            padding:0 0 0 0;
        }
        .original2{
            width:37.36px;
            height:15.33px;
            text-decoration:line-through;
            color:#666666;
            font-size:14px;
            margin-left:8px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
          <div class="wrap-x"><a href="#">
              <img src="../images/img1.jpg" class="imgs" alt="">
              <p class="name">魅族 EP3C 耳机</p>
              <p class="desc">【限时特惠99元】</p>
              <p class="price">￥99<span class="original1">￥120</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img2.png" alt="">
             <p class="goods-name">魅族 POP Pro 主动降噪耳机</p>
             <p class="goods-desc">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
             <p class="goods-price"><span>￥</span>499</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img3.png" alt="">
              <p class="goods-name">魅族 POP2s 真无线耳机</p>
              <p class="goods-desc">【限时3期免息】好声音标杆 | Flyme 妙连</p>
              <p class="goods-price"><span>￥</span>299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img4.png" alt="">
              <p class="goods-name">魅族 EP63NC 无线降噪耳机</p>
              <p class="goods-desc">【限时特惠249元+3期免息】</p>
              <p class="goods-price"><span>￥</span>249<span class="original2">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img5.jpg" class="imgs" alt="">
              <p class="name">魅族 HD60 头戴式蓝牙耳机</p>
              <p class="desc">【限时特惠329元+3期免息】</p>
              <p class="price">￥329<span class="original1">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img6.png" alt="">
              <p class="goods-name">魅族 HD60 降噪耳机</p>
              <p class="goods-desc">【限时特惠799元+12期免息】</p>
              <p class="goods-price"><span>￥</span>799<span class="original2">￥1099</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img7.png" alt="">
              <p class="goods-name">魅族 POP2 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠249元】</p>
              <p class="goods-price"><span>￥</span>249<span class="original2">￥399</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img8.png" alt="">
              <p class="goods-name">魅族 HIFI 解码耳放</p>
              <p class="goods-desc">【限时特惠149元】</p>
              <p class="goods-price"><span>￥</span>149<span class="original2">￥169</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img9.jpg" class="imgs" alt="">
              <p class="name">MEIZU UR 高端定制耳机 预约</p>
              <p class="desc">【预约专用】私人定制，为你而声</p>
              <p class="price">￥200</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img10.png" alt="">
              <p class="goods-name">MEIZU UR LIVE 特调版</p>
              <p class="goods-desc">手工定制公模 ｜ 楼氏定制四单元动铁</p>
              <p class="goods-price"><span>￥</span>1299</p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img11.png" alt="">
              <p class="goods-name">POP 真无线蓝牙耳机</p>
              <p class="goods-desc">【限时特惠299元】</p>
              <p class="goods-price"><span>￥</span>299<span class="original2">￥499</span></p>
          </a></div>
          <div class="wrap-x"><a href="#">
              <img src="../images/img12.png" alt="">
              <p class="goods-name">魅族 EP2X 耳机</p>
              <p class="goods-desc">一体式线控 | 3.5mm接口 | 流线设计</p>
              <p class="goods-price"><span>￥</span>69<span class="original2">￥129</span></p>
          </a></div>
       </div>
    </div>
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 264楼

/* 顶部图片隐藏 */
.header{
    width: 100%;
    height: 100%;
    display: none;
}
/* 黑色导航 */
.nav{
    width: 100%;
    height: 40px;
    background-color:#333;
    

}
/* 居中div */
.nav-center{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
/* a的字体颜色 */
a{
    color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
    color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
    float: left;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
    float: right;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
    margin: 0 3.6px;
    color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
    background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
    color: #ff6700;
}
/* 购物车下拉列表的属性，1:相对于右侧li定位，隐藏下拉列表，所有属性:all .3s的过度 */
.cart>.cart-list{
    width: 316px;
    /* 高度设置为0隐藏下拉列表 */
    height: 0px;
    background:#fff;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px #aaa;
    color: #424242;
    /* 下拉列表的文字溢出部分隐藏 */
    overflow: hidden;
    /* 过度:所有属性 .3s秒速度显示 */
    transition: all .3s;
    /* 在白色导航上边显示出来 */
    z-index: 1;
}
/* 鼠标悬停时显示下拉列表，字体居中 */
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
   width: 124px;
    /* 高度设置为0隐藏下拉列表 */
   height: 0px;
   background-color:#fff;
   box-shadow: 0 1px 5px #aaa;
   /* 相对于左侧li定位 */
   position: absolute;
   top: 40px;
   left: 50%; 
   margin-left: -66px; 
   /* 下拉列表的文字溢出部分隐藏 */
   overflow: hidden;
   /* 过度:所有属性 .3s秒速度显示 */
   transition:all .3s;
   /* 在白色导航上边显示出来 */
   z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
    width: 90px;
    height: 90px;
    margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
    font-size: 14px;
    line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
    height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 定位小三角并且隐藏 */
    position: absolute;
    left: 17px;
    top: 32px;
    display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
    display: block;
}
/* 白色导航部分 */
.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
}
/* 居中部分 */
.white-wrap{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
/* logo部分 */
.logo-mi{
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 定位加隐藏 */
    position: relative;
    overflow: hidden;
    
}
/* 中间文字导航部分 */
.white-nav-center{
    width: 876px;
    height:100px;
    float: left;
}
/* 搜索框部分 */
.nav-input{
    width: 295px;
    height:100px;
    background: blue;
    float: right;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo定位的设置 */
.mi-logo{
    top: 0;
    left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
    top: 0;
    left: -55px;
}
.logo-mi:hover>a>.mi-home{
    left: 0px;
}
.logo-mi:hover>a>.mi-logo{
    left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
    float: left;
    line-height: 100px;
    
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
   font-size: 16px;
   color: #333;
   padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
    margin-top: 9px;
    margin-left: 20px;
    margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
    color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
    width: 100%;
    height: 230px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    position: absolute;
    top: 100px;
    left: 0;
    box-shadow: 0 1px 2px #aaa;
    box-sizing: border-box;
    display: none;
    transition: all .3s ;
    
}
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:2px solid #bdb8b8 ;
    margin-top: 30px;
    margin-bottom: 15px;
    
}
.img-box img{
    width: 160px;
    height: 110px;
}
.pull-down-center p{
    font-size: 12px;
    line-height: 20px;
    
}
.pull-down-center p:nth-of-type(1){
    color: #ff6700;
}
.pull-down-center p:nth-of-type(2){
    color: #333;
}
.white-nav li:hover>.pull-down{
    display: block;
   
}

白色导航栏的li下拉列表不显示过渡属性

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

到底什么时候需要用form表单包裹呢，为什么有的input被包裹，有的没有被包裹。输入框不需要form吗？

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

  <div class="nav-input">
            <input type="text" placeholder="小米之家">
            <button class="button">&#xe63d;</button>
        </div>

实现不了放大镜。

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

lable有什么作用？咋用的？视频看不太明白。

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

你好，老师我测试下元素后面必须加空格再加：.not() 选择器才能实现功能，而其他的伪类选择器不用加空格直接跟着写就可以，这是为什么呢

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

<!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="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/小米官网练习.css">
</head>
<body>
    
<div class="header">
    <a href="#">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
    </a>
<!-- 黑色导航 -->
</div>
    <div class="nav">
        <div class="nav-center">
            <ul class="nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</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="app">
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <div class="QRcode">
                        <img src="../img/93650133310ec1c385487417a472a26c.png" alt="" class="QRcode-img">
                        <p>小米商城APP</p>
                    </div>
                    <div class="sanjiao"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">select location</a></li>
            </ul>   
            <ul class="nav-right">
                <li class="cart">
                    <a href="#">购物车（0)</a>
                    <div class="cart-list">购物车还没有商品，赶紧加入吧</div>
                </li>
                <li><a href="#">信息通知</a></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">登录</a><span>|</span></li>
            </ul>   
        </div>  
    </div>
<!-- 白色导航 -->
<div class="white-nav">
    <div class="white-wrap">
        <div class="logo-mi">
            <a href="#">
                <img src="../img/mi-logo.png" alt="" class="mi-logo">
                <img src="../img/mi-home.png" alt="" class="mi-home">
            </a>
            
        </div>
        <div class="white-nav-center"> 
             <ul>
                <li>
                    <a href="#">
                    <img src="../img/大logo.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>3299元起</p>
                                        <p>小米10s</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>3999元起</p>
                                        <p>小米11</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul> 
        </div>
        <div class="nav-input">
            <input type="text" placeholder="小米之家">
            <button class="button">&#xe63d;</button>
        </div>
    </div>
</div>



</body>
</html>

补充的HTML。问题是不显示放大镜图标和小米手机下拉列表的过渡属性.

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

同学您好