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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            weight:1000px;
            height:600px;
            /*第一种写法*/
            background-color: crimson;
           background-image: url("images/小新.jpg");
            background: no-repeat center;
            /*第二种写法*/
            /*background: crimson  url("images/小新.jpg") no-repeat center;*/
        }
    </style>

</head>
<body>
<div class="box"></div>
</body>
</html>

程序中第一种写法运行不成功，这是为什么?

单个属性写在简写属性前面了

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

在html页面中的style属性中写css样式时，vscode写css总是出现emmet abbreviation，

回车之后，自动生成的是html的标签，

百度好久，试了两个解决方案，都没有效果，请问老师这个该怎么解决。

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

老师这里为啥不用ul做，用ul做和这样用div直接做有什么区别吗

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

.left ul li span{
            float: right;
            }
            为什么不用居右？这样出来的效果也一样的呀

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

    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0 "/>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .items{
            width: 25%;
            height: 450px;
            background-color: red;
            float: left;
            padding: 10px;
            box-sizing: border-box;
        }
        .items>div{
            width: 100%;
            height: 100%;
            background-color: green;
        }
        /*移动端*/
        @media screen and (max-width: 768px) {
            .items{
                width: 50%;
            }

        }
        /*ipad端*/
        @media screen and (min-width: 768px) and (max-width: 992px){
            .items{
                width: 33%;
            }
        }
        /*pc端*/
        @media screen and (min-width: 992px) {
            .items{
                width: 25%;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>
    <div class="items">
        <div></div>
    </div>

</div>
</body>

老师您好，视频中老师说的因为适配器的原因（@media），所以得把css里items的宽度取消，但我发现取消与不取消没有任何区别，这是为什么呢

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

这地方居中为啥这么写，为啥不能直接设置居中，用margin:0 auto呢

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

<!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>
        body{
            background-color: #f1f1f1;
        }
        .phone{
            width:1300px;
            height:680px;
            margin:0 auto;
        }
        .left{
            float:left;
            width:234px;
            height:680;
            margin-top:10px;
        }
        .right{
            float:right;
            width:1050px
        }
        .box{
            width:250px;
            height:300px;
            float:left;
            margin-left:10px;
            background-color:#fff;
            margin-top:10px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="left">
            
        <div class="right">
            <div class="box">
                <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d91bb6cf7da0947e8a6e50e03f4daf06.jpg?thumb=1&amp;w=351&amp;h=921&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Xiaomi 13 限量定制色" src="//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292351_92aba2c69123166a74ba2e2b525b1ae2.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Redmi K60" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a6cec580260ceb20ae6a885c2c65c611.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Xiaomi 13 Pro" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa047170a22d9f0852254aa36df5f5f0.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Redmi K60 Pro" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Xiaomi 13" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c6497b70f2e881460cb232082a0da6.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Redmi Note 12 Pro 极速版"  src="//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212251443_29b17941a7365948446bd193011d9241.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
            <div class="box">
                <img width="160" height="160" alt="Redmi Note 12 5G"  src="//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png?thumb=1&amp;w=300&amp;h=300&amp;f=webp&amp;q=90" lazy="loaded">
            </div>           
        </div>
    </div>
</body>
</html>
  
  
  //不知道为什么运行的时候就出问题了，我写的是图片的网络地址

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            width:100%;
            height:61px;
            position:relative;
        }
        .nav li{
            float:left;
            padding:20px 26px;
            list-style-type: none;
        }
        .nav a{
            text-decoration: none;
            color: #333333;
        }
        .nav-list{
            width:300px;
            height: 300px;
            background-color:red;
            position:absolute;
            left:100px;
            top:61px;
            display:none;
        }
        .nav li:hover>.nav-list{
            display: block;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">手机</a>
        <div class="nav-list"></div></li>
        <li><a href="">配件</a></li>
        <li><a href="">下载</a></li>
        <li><a href="">服务</a></li>
        <li><a href="">amigios</a></li>
    </ul>
</div>
</body>
</html>

麻烦老师解答一下疑惑：

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

这节课实操里面下面￥符号放在i标签里，“起”这个字放在em标签里，不明白为啥在上面又把字体设置成normal，先设置成斜体，再把字体恢复正常，感觉多此一举，有什么意义呢？

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

    <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模块/浮动与定位 357楼

2.下拉效果.zip

1.png

我想要实现图片中两个效果，1.是上面列表点击（hover）时，会显示下拉列表，但是要求下拉列表不会随着鼠标离开而隐藏。2.是下面的文字也显示在下拉列表的图片的下面，请问老师如何设置，谢谢！！

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

接着上一个代码

就是红框这个代码的逻辑是什么呀

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

老师，这里overflow不是可以处理float引起的两个副作用吗？
为啥还要再使用一次clear啊

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

同学您好