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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:805px;
            height:303px;
            border:5px solid brown;
            margin:100px auto;
            column-count:3;
            column-gap:10px;
            column-rule:solid 10px red;
            display:table-cell;
            vertical-align: middle;
        }
        /*p{
            display:table-cell;
            vertical-align: middle;
        }*/
    </style>
</head>
<body>
<div class="box">
    我想.那只是一刹那的心动吧.在人生中.一切的偶然太多.一切的不舍太多.一切的懵懂太多.一切的一切太多.就在刚刚明白的那一瞬间.却又懂得了离别.太美的错误因为太年轻.太美的承诺因为太无知.总在自己最脆弱的时候突然说要离开.是我太笨?还是青春太傻?是我太傻?还是时间太快?我不知道.自己到底是怎么一回事.在青春的愚昧中.我束手无策.
    　　就算鸟依旧要飞.就算风依旧要散.就算青春依旧会走.我还有什么办法去挽回花儿那段灿烂的时光呢?青春.是年少的冲动.青春.是懵懂的岁月.青春.是情窦的初开.青春.是回忆的见证.我的青春.我的冲动.我的年少.我的无知.我的心动.
    　　那些因为青春所许下的诺言.那些因为青春所留下的感悟.那些因为青春所犯下的错误.那些因为青春的种种种种.如装订的小说.一页一页的在我脑海中翻来覆去.剩下了些什么呢?是依依不舍.还是痛彻心扉?

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

问题一：本来想实现块级元素居中，多行文本在块级元素中垂直居中。我就用了display，但这样margin就失效了。有什么其他办法可以实现吗？

问题二：我试了用<p></p>标签，选择器里的display就不生效了，这是因为什么？display的适用范围吗？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用定位知识点</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
    .box{
        position:relative;
        width: 100%;
        height: 1155px;
    }
   .box img{
       width:100%;
   }
        .box1,.box2{
           width:303px;
           height:375px;
           background-color: red;
           position:absolute;
           top: 10px;
           left: 10px;
           right: 10px;
           /*position:static;使用静态定位，就相对浏览页面*/
       }


        a{
            text-decoration:none;
        }
        .box1,.box2{
            position:relative;
        }
        .text1,.text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }

        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <a href="#">
            <img src="images/1.jpg" alt="">
            <div class="text1">
                <p class="name1">魅族 EP3C 耳机</p>
                <p class="desc1">【限时特惠99元】</p>
                <p class="price1">￥129</p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/2.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP Pro 主动降噪耳机</p>
                <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
                <p class="price2"><span>￥</span><span class="number">499</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/3.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP2s 真无线耳机</p>
                <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
                <p class="price2"><span>￥</span><span class="number">299</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/4.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 HIFI 解码耳放</p>
                <p class="desc2">【年货节特惠价149元】</p>
                <p class="price2"><span>￥</span><span class="number">169</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/5.jpg" alt="">
            <div class="text2 ">
                <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
                <p class="desc1">【年货节特惠价349元+12期免息】</p>
                <p class="price1">￥499</p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/6.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 HD60 降噪耳机</p>
                <p class="desc2">【年货节特惠价799元+12期免息】</p>
                <p class="price2"><span>￥</span><span class="number">1099</span></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/7.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 EP63NC 无线降噪耳机</p>
                <p class="desc2">【年货节特惠价249元+6期免息】</p>
                <p class="price2"><span>￥</span><span class="number">249</span><s>￥499</s></p>
            </div>
        </a>
    </div>
    <div class=" box2">
        <a href="#">
            <img src="images/8.png" alt="">
            <div class="text2 ">
                <p class="name2">魅族 POP Pro 主动降噪耳机</p>
                <p class="desc2">【年货节特惠价149元】</p>
                <p class="price2"><span>￥</span><span class="number">149</span><s>￥169</s></p>
            </div>
        </a>
    </div>
</div>
</body>
</html>

这个我用定位的知识，父元素用了相对定位，8个div子元素用绝对定位，但效果图没有实现，水平显示。我想实现以下效果图。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .box,.box1{
            width: 303px;
            height: 375px;
            background-color: red;
            position: relative;
        }
        .box1{
            float:left;
        }
         img{
            width: 100%;
        }
        .text{
            width: 100%;
            height: 88px;
            /*相对于已经定位的父元素定位*/
            position: absolute;
            left: 0;
            bottom: 20px;
            text-align: center;

        }
        .name{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc{
            color: #fff;
            font-size: 14px;
        }
        .price{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
<div class="box1">
    <a href="#">
        <img src="images/370ad36f-425c-453a-b406-ccb2a0dffeec.jpg" alt="">
        <div class="text">
            <p class="name">MEIZU UR 高端定制耳机 预约</p>
            <p class="desc">【预约专用】私人定制，为你而声</p>
            <p class="price">￥200</p>
        </div>
    </a>
</div>
</body>
</html>

我已经在box1处加了float:left;效果图为什么没有实现块级元素水平显示

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*p默认有16px的上下外边距*/
            margin: 0px;
        }
        .box{
            width:1260px;
            height:780px;
            position:relative;
        }
        /* 合并选择器*/
        .box1,.box2 {
            width:303px;
            height:375px;
            background-color: red;
            position:relative;
            float: left;
            margin:12px 0px 0px 12px;
            /*position:static;使用静态定位，就相对浏览页面*/
        }
         img{
            width:100%;
        }
        .text1{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name1{
            color: #fff;
            font-size: 21px;
            font-weight: 700;
        }
        .desc1{
            color:#fff;
            font-size:14px;
        }
        .price1{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2{
            background-color: whitesmoke;

        }
        .box2 img{
            width:100%;
        }
        .text2{
            width:303px;
            height:88px;
            position:absolute;
            left:0px;
            bottom:20px;
            text-align:center;
        }
        .name2{
            color: #333;
            font-size: 16px;
        }
        .desc2{
            color:#999;
            font-size: 14px;
        }
        .price2{
            color: #ebce6b;
            font-size: 24px;
            font-weight: 700;
        }
        .box2 span{
            color:#cc0000;
            font-size: 14px;
        }
        .box2 .number{
            color:#cc0000;
            font-size: 22px;
        }
        s{
            color:gray;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">

        <img src="images/1.jpg" alt="">
        <div class="text1">
            <p class="name1">魅族 EP3C 耳机</p>
            <p class="desc1">【限时特惠99元】</p>
            <p class="price1">￥129</p>
        </div>
    </a>
</div>
    <div class=" box2">

        <img src="images/2.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">三重混合主动降噪技术 | 三麦克风智能通话降噪</p>
            <p class="price2"><span>￥</span><span class="number">499</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/3.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP2s 真无线耳机</p>
            <p class="desc2">【限时6期免息】好声音标杆 | Flyme 妙连</p>
            <p class="price2"><span>￥</span><span class="number">299</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/4.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HIFI 解码耳放</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">169</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/5.jpg" alt="">
        <div class="text2 ">
            <p class="name1">魅族 HD60 头戴式蓝牙耳机</p>
            <p class="desc1">【年货节特惠价349元+12期免息】</p>
            <p class="price1">￥499</p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/6.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 HD60 降噪耳机</p>
            <p class="desc2">【年货节特惠价799元+12期免息】</p>
            <p class="price2"><span>￥</span><span class="number">1099</span></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/7.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 EP63NC 无线降噪耳机</p>
            <p class="desc2">【年货节特惠价249元+6期免息】</p>
            <p class="price2"><span>￥</span><span class="number">249</span><s>￥499</s></p>
        </div>
        </a>
    </div>
    <div class=" box2">

        <img src="images/8.png" alt="">
        <div class="text2 ">
            <p class="name2">魅族 POP Pro 主动降噪耳机</p>
            <p class="desc2">【年货节特惠价149元】</p>
            <p class="price2"><span>￥</span><span class="number">149</span><s>￥169</s></p>
        </div>
        </a>
    </div>
</div>
</body>
</html>

老师，我想实现图片居中，该怎么弄，现在的效果图全部靠左，我想两边空白地方一样多

右边红色的地方太多了，如何左右均匀分布

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

一、老师，这是这个周的是操作业，我遇到的问题是 middle2 达不到作业的要求，没有紧贴盒子底部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100%
            height: 50px;
            background-color: blue;
        }
        .wrap{
            width: 700px;
            height: 50px;
            margin: 0 auto;
            background-color: cadetblue;
            padding-top: 10px;
        }
        .box2{
            width: 700px;
            height: 100px;
            background-color: cadetblue;
            margin: 10px auto 0px auto;
            padding-top: 20px;
        }
        .box3{
            width: 700px;
            height: 20px;
            background-color: gray;
            margin: 0 auto;
        }
        .box4{
            width: 700px;
            height: 40px;
            background-color: green;
            margin: 0 auto;
            padding-top: 50px;

        }
        .box5{
            width: 700px;
            height: 250px;
            background-color: gray;
            margin: 0 auto;
            margin-top-40px;

        }
        .box6{
            width: 700px;
            height: 20px;
            background-color: dodgerblue;
            margin: 10px auto 0px auto;
        }
        .no1{
            padding-left: 50%;
            padding-right: 50%;
        }
        .no2{
            padding-left: 50%;
            padding-right: 50%;
        }
        .no3{
            padding-left: 50%;
            padding-right: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="wrap"><span class="no1">top1</span></div>
    </div>

    <div class="box2" ><span class="no2">middle1</span></div>
    <div class="box3"></div>
    <div class="box4" ><span class="no3">middle2</span></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>
</html>

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

<!--页脚开始-->
<div class="footer">
    <div class="wrap">
        <div class="footer-seriver">
            <ul>
                <li>
                    <a href="#">
                    <i class="iconfont">&#xe629;</i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe60e;</i>
                        <span>7天无理由退货</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe606;</i>
                        <span>15天免费换货</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe624;</i>
                        <span>满99元包邮</span>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe617;</i>
                        <span>520余家售后网点</span>
                    </a>

                </li>
            </ul>
        </div>
        <div class="footer-link">
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="">账户管理</a></li>
                <li><a href="">购物指南</a></li>
                <li><a href="">订单操作</a></li>
            </ul>
            <div class="footer-aside">
                <p class="tel">400-100-5678</p>
                <p class="time">8:00-18:00（仅收市话费</p>
                <a href="#" class="kefu">人工客服</a>
                <div class="follow">
                    关注小米：
                    <img src="image/wb.png" alt=""/>
                    <img src="image/wx.png" alt=""/>
                </div>

            </div>

        </div>
    </div>

</div>

老师我就想问下，在页脚最后右边的最后一排字“关注小米”这点本来我自己想的是用p标签，然后给嵌套两个a标签，然后在在a标签里给两个img

后面看到视频中老师用的div，我就想问下，最后一排为什么要用div上面三排出了有个用的a标签，其他都是用的p标签来写的，为什么最后这一点要用div

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

<!--主体开始-->
<div class="cantent">
    <div class="wrap">
        <!--手机开始-->
        <div class="phone">
            <h3 class="title">手机</h3>
            <div class="phone-box">
                <div class="phone-box-left">
                    <a href="#">
                        <img src="image/cb1bd61ad71c45a4f67f09b075463944.jpeg" alt=""/>
                    </a>
                </div>
                <div class="phone-box-right">
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                    <div class="items1">
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=120&h=120" alt=""/>
                            <p class="name2">小米10s</p>
                            <p class="name3">骁龙870 | 对称式双扬立体声</p>
                            <p class="name4">3299元起</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="big-img">
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=736&h=72" alt=""/>
                </a>
            </div>
        </div>
        <!--手机结束-->
    </div>
</div>
<!--主体结束-->


css
/*主体开始*/
.cantent{
    width: 100%;
    /*自动找高*/
    overflow: hidden;
    padding: 4px 0 12px;
    background-color: #f5f5f5;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.phone-box-left{
    width: 234px;
    height: 614px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.phone-box-right{
    width: 992px;
    height: 614px;
    /*background-color: deepskyblue;*/
    float: left;


}
.phone-box-left img{
    width: 100%;
    height: 100%;
}
.items1{
    width: 234px;
    height: 282px;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    background-color: #fff;
    float: left;
    transition: all .2s linear;
    /*box-sizing: border-box;*/
}
.items1 img{
    width: 160px;
    height: 160px;
    margin-bottom: 18px; ;
}
.name2{
    width: 214px;
    height: 20px;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 10px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name4{
    width: 214px;
    height: 21px;
    color: #ff6700;
    margin: 0 10px 14px;
    font-size: 14px;
}
.phone-box-left:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.items1:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    transform: translate(0,-2px);
}
.big-img{
    width: 100%;
    height: 120px;

 }
.big-img img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}

老师我已经遇见过好几次这种情况了，代码没问题，但就是不显示，去浏览器检索了也有，但就是显示不出来，空白一片，这到底是bug？还是什么问题，求老师解答下！！感谢

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

<!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">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:600px;
            height:1200px;
            margin:auto;
            background:rgb(14, 112, 128);
        }
        #box > h2{
            padding:50px;
            padding-bottom:15px;
            text-align:center;
            color:white;
        }
        #box > h2:nth-child(2){
            padding-top:0px;
            color:yellow;
        }
        #box > h3{
            height:40px;
            text-align:center;
            line-height:40px;
            color:white;
            border:1px solid red;
        }
        #box > h3 > i{
            font-size:30px;
            color:white;
        }
        #box > .content{
            width:100%;
            height:280px;
            margin-top:20px;
        }
        #box > .content .content_center{
            width:75%;
            height:100%;
            margin:auto;
        }
        #box > .content .content_center .content_center_left{
            float:left;
            width:60%;
            height:100%;
        }
        #box > .content .content_center .content_center_left .content_center_left_top{
            width:100%;
            height:60px;
            text-align:center;
            color:white;
            line-height:60px;
            font-size:20px;
        }
        #box > .content .content_center .content_center_left .content_center_left_bottom{
            width:220px;
            height:220px;
            margin:auto;
            background:pink;
        }
        #box > .content .content_center .content_center_right{
            float:left;
            width:40%;
            height:100%;
        }
        #box > .content .content_center .content_center_right .content_center_right_center{
            float:right;
            width:80%;
            height:100%;
            padding-top:8px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_top{
            width:100%;
            height:120px;
        }   
        #box > .content .content_center .content_center_right .content_center_right_center .fz{
            width:100%;
            height:40%;
            font-size:20px;
            color:white;
            line-height:48px;
            text-align:center;
            cursor: pointer;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .lj{
            width:100%;
            height:46%;
            text-align:center;
            line-height:55px;
            border-radius:30px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzje{
            background:yellow;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzlj{
            background:white;
            margin-top:0px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_bottom{
            width:100%;
            height:120px;
            margin-top:50px;
        }
        #box > .ziduan{
            width:100%;
            margin-top:40px;
            color:white;
        }
        #box > .ziduan > p{
            margin-left:20px;
            line-height:40px;
        }
    </style>
</head>
<body>

    <div id="box">
        <h2>请使用USDT-TRC20支付转账</h2>
        <h2>转账数量需严格要求, 数量错误将不会到账</h2>
        <h3> <i class="iconfont icon-naozhong"></i> 有效时间 : <span class="shi">10</span>:<span class="fen">00</span>:<span class="miao">00</span></h3>
        <div class="content">
            <div class="content_center">
                <div class="content_center_left">
                    <div class="content_center_left_top">
                        马上扫码去转账
                    </div>
                    <div class="content_center_left_bottom"></div>
                </div>
                <div class="content_center_right">
                    <div class="content_center_right_center">
                        <div class="content_center_right_center_top">
                            <div class="fz">复制金额</div>
                            <div class="lj fzje">15.38 USDT</div>
                        </div>
                        <div class="content_center_right_center_bottom">
                            <div class="fz">复制链接</div>
                            <div class="lj fzlj">链接</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ziduan">
            <p>温馨提醒</p>
            <p>1. 请勿向上述地址充值任何非USDT-TRC20资产, 否则资产将不可找回</p>
            <p>2. 您充值至上述地址后, 需整个网络节点的确认, 多次网络确认后到账</p>
            <p>3. 务必确保最终到账金额为15.38USDT, 不包含额外手续费, 其他不符金额都不自动到账</p>
            <p>4. 该地址只能使用一次, 重复使用会造成资产丢失</p>
        </div>
    </div>
    
</body>
</html>

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

老师您好，在听完这节课后，视频中出现了很多转换为怪异盒模型的用法，之前学的怪异盒模型，我知道它的属性，但什么时候该去使用它，一直没搞清楚，麻烦老师解答下，谢谢老师

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

老师，我想请教一下当鼠标悬停在白色导航上照理说出现的下拉导航里的样式应该是一致的，但是为什么我换了其他图片之后它的布局就完全改变了（布局是统一设计的，只是换了不同的图片想去验证一下）；我也下载了源代码直接在源代码相应部分也试着换了其他图片，发现结果都是一样的，布局会紊乱。

<!--白色导航部分-->
    <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                <img class="mi-home" src="images/mi-home.png" alt="">
                <img class="mi-logo" src="images/mi-logo.png" alt="">
            </div>
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">小米手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="images/8729282b199b3ec51e31c1b6b15f3f93.jpg" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="images/b11742a0be47f9d97bb6a13ea580018d.png" alt="">
                                            </div>
                                            <p class="name1">小米11</p>
                                            <p class="price1">3999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="images/b11742a0be47f9d97bb6a13ea580018d.png" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="images/b11742a0be47f9d97bb6a13ea580018d.png" alt="">
                                            </div>
                                            <p class="name1">小米10至尊纪念版</p>
                                            <p class="price1">5299元起</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="search"></div>
        </div>
    </div>

/*白色导航部分*/

.white-nav {
    width: 100%;
    height: 100px;
    position: relative;
}

.logo {
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    float: left;
    margin-top: 22.5px;
    position: relative;
    overflow: hidden;
}

.logo>img {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .2s;
}

.mi-home {
    left: -55px;
}

.mi-logo {
    left: 0;
}

.logo:hover>.mi-home {
    left: 0;
}

.logo:hover>.mi-logo {
    left: 55px;
}

.nav-bar {
    width: 875px;
    height: 100px;
    float: left;
    line-height: 100px;
}

.nav-bar>ul>li {
    float: left;
}

.nav-bar>ul>li>a {
    color: #333;
    padding: 0 10px;
}

.nav-bar>ul>li>a:hover {
    color: #ff6700;
}

.nav-bar>ul>li:first-child img {
    margin-top: 22.5px;
}

.nav-bar-list {
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .1);
    position: absolute;
    top: 100px;
    left: 0;
    display: none;
    z-index: 999;
}

.nav-bar-list li {
    width: 204px;
    float: left;
}

.nav-bar-list li:last-child .img-box {
    border-right: 0;
}

.img-box {
    width: 100%;
    height: 110px;
    margin-top: 35px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.nav-bar-list p {
    line-height: 20px;
    font-size: 12px;
}

.name1 {
    color: #333;
}

.price1 {
    color: #ff6700;
}

.nav-bar li:hover .nav-bar-list {
    display: block;
}

.search {
    width: 296px;
    height: 100px;
    background-color: pink;
    float: left;
}

这是我做的部分的截图：

这是源码我换了图片之后的截图

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

创建文件名可以用中文吗? 以前老师说过最好不要用中文跟拼音...

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

 <style>
        @media screen and(max: width 768px){
            body{
                background-color: red;
            }
        }
        @media screen and screen(min-width: 768px)and(max-width 992px){
            body{
                background-color: green;
            }
        }
        @media screen and(min-width: 992px){
            body{
                background-color: blue;
            }
        }
    </style>

老师，颜色出不来啊？

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

<style>
        @media screen and (max: width 768px;){
            background-color: red;
        }
    </style>

写完之后，下面颜色出不来

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

 <style>
        @media screen (max: width 768px){
            background-color:red;
        }
    </style>

@media screen (max: width 768px){
            background-color:red;
        }

老师，我这行代码是哪里不对吗？

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

    <style>
        /*
        思路：
        1）绝对定位到需要的位置
        2）display:none; 隐藏
        3）display:block;显示



        */
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style-type: none;
        }
        .box {
            width: 1226px;
            height: 460px;
            background-color: #008cff;
            margin: 0 auto;

        }

        .slide{
            width: 234px;
            height: 460px;
            background-color: rgba(105,101,101,.6);
            padding: 20px 0;
            box-sizing: border-box;
            position: relative;



        }
        .slide li{
            height: 42px;
            line-height: 42px;
            padding-left: 30px;



        }
        .slide a{
            font-size: 14px;
            color: #fff;
        }
        .a{
            width: 992px;
            height: 460px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 234px;
            display: none;


        }
        .slide li:hover>.a{
            display: block;


        }



    </style>
</head>
<body>
<div class="box">
    <div class="slide">
        <ul>
            <li>
                <a href="#">手机 电话卡</a>
                <div class="a">1</div>
            </li>
            <li>
                <a href="#">手机 电话卡</a>
                <div class="a">2</div>
            </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>
            <li><a href="#">手机 电话卡</a></li>

        </ul>


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

老师您好，我想问一下之前隐藏都用的是overflow：hidden；，这次为什么要用display：none|block；

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

同学您好