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

<!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>
    <style>
        .box1{
            /* 绘制一个圆并设置线性渐变 */
            width:300px;
            height:300px;
            border:5px solid white;
            background-color:red;
            border-radius:50%;
            background-image:linear-gradient(to right bottom,red,orange,yellow,green);
            float:left;
        }
        .box2{
            /* 设置径向渐变 */
            width:300px;
            height:300px;
            margin:10px;
            background-color:chartreuse;
            float:left;
        }
        /* 鼠标悬停在box2上，实现径向渐变效果 */
        .box2:hover{
            /* 为什么top放在circle后效果不显示，而放在circle前才显示效果，老师不是说颜色前的语法顺序是渐变形状、渐变大小、再渐变中心点么？ */
            background-image:-webkit-radial-gradient(top,circle,red,orange,yellow,green);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

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

<!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>小米10s</p>
                                        <p>3299元起</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>3999元起</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">搜索</button>
               <div class="nav-input-list"></div>
        </div>
    </div>
</div>



</body>
</html>

html部分.

/* 顶部图片隐藏 */
.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;
    float: right;
    position: relative;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo-mi-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;
    box-shadow: 0 1px 2px #aaa;
    position: absolute;
    top: 100px;
    left: 0;
    box-sizing: border-box;
    display: none;
    transition: all .5s;
    
}
/* 居中的下拉列表部分 */
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:1px solid #bdb8b8 ;
    box-sizing: border-box;
    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: #333;
}
.pull-down-center p:nth-of-type(2){
    color:#ff6700;
}
/* 问题：不显示过渡属性 */
.white-nav li:hover>.pull-down{
    display: block;
}


/* input属性 */
.nav-input>input{
    width: 220px;
    height: 50px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 23.5px;
    float: left;
    /* 不显示轮廓线 */
    outline: none;
    border-right: none;
    transition:all .3s;
}
/* button按钮属性 */
.nav-input>button{
    width: 52px;
    height: 50px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    float: left;
    margin-top: 23.5px;
    /* 不显示轮廓线 */
    outline: none;
    transition:all .3s;
}
/* hover鼠标悬停时的状态 */
.nav-input>input:hover,.nav-input>input:hover+button{
    border-color: #b0b0b0;
}
/* focus（否卡尔时）鼠标获取焦点时的状态 */
.nav-input>input:focus,.nav-input>input:focus+button{
    border-color: #ff6700;
}
/* 鼠标悬停在button按钮上的状态 */
.nav-input>button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
/* 下拉列表属性 */
.nav-input-list{
    width: 219px;
    height: 240px;
    background-color: #fff;
    border: 1px solid #ff6700;
    border-top:none ;
    /* 在input的div上定位 */
    position: absolute;
    left: 0;
    top: 74px;
    display: none;
}
/* 点击获取焦点时下拉列表出现 */
.nav-input>input:focus~.nav-input-list{
    display: block;
}
/* 以上白色导航结束 */

css部分。小米属性的下拉列表transition不出现过渡属性

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

<!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新特性 528楼

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

实现不了放大镜。

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

/* 顶部图片隐藏 */
.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新特性 530楼

<form action="提交页面.html">
    <p>
        性别：
        <input type="radio" name="sex" id="man"/>
        <lable for="man">男</lable>
        <input type="radio" name="sex"id="woman"/>
        <lable for="woman">女</lable>
    </p>
</form>

提升用户体验度点击文字这里，代码如上，浏览器里却不能点击文字

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

<!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>Margin布局</title>
    <style>
        .box{
            width: 100%;
            height: 1155px;
            background-color: aqua;
        }
        .wrap{
            width: 1240px;
            height: 1150px;
            background-color: red;
            /* （父元素宽度-子元素宽度）/2 */
            margin: 0 auto;
        }
        .wrap>div{
            width: 303px;
            height: 375px;
            background-color: seagreen;
            float: left;
            margin-top: 10px;
            margin-right: 9px;
        }
        .four{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div></div>
            <div></div>
            <div></div>
            <div class="four"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

老师我想请问一下在这个布局下我想测试第四个测试是否被挤下一行的第一个，但是在内联样式设置第四个div背景为粉红色为什么没有显示出来呢？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" align="center" width="500px" height="200px">
    <tr bgcolor="#ffd700">
        <td>片名</td>
        <td>日期</td>
        <td>时间</td>
        <td>电影院</td>
        <td>票价</td>
    </tr>
    <tr>
        <td rowspan="2">【国】卡拉是条狗</td>
        <td rowspan="3">三月七日</td>
        <td  rowspan="6">7:30</td>
        <td rowspan="2">红楼电影院</td>
        <td>小厅：40</td>
    </tr>
    <tr>
        <td>大厅：50</td>
    </tr>
    <tr>

        <td>【美】谍海计中计</td>
        <td>花市电影院</td>
        <td>30</td>
    </tr>
    <tr>
        <td >【美】正义守望者</td>
        <td>三月八日</td>
        <td rowspan="3">华兴国际电影院</td>
        <td>小厅：35</td>
    </tr>
    <tr>
        <td>【国】周宇的火车</td>
        <td>三月十日</td>
        <td>大厅：45</td>
    </tr>
    <tr>
        <td>【美】冰川时代</td>
        <td>三月十一日</td>
        <td>情侣座：80</td>
    </tr>
</table>
</body>
</html>

老师我交不了截图，截图要下载插件，但是我下载了也没有用，重启浏览器还是没有用

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

问题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 534楼

 <div class="conetnt-title">推荐餐厅</div>
    <div class="conetnt">
        <div class="items">
            <div class="items-top">
                <img src="img/xl-logo2x.png" alt="">
                <p>商家标题一</p>
                <p>人均：￥20.00 |10人预订</p>
                <p>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                    <i class="iconfont">&#xe636;</i>
                </p>
            </div>
        </div>
            <div class="items-bottom">南屏街金马坊</div>
        </div>
    </div>

.conetnt-title{
    width: 100%;
    height: 25px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #017e5c;
    text-align: left;
    line-height: 25px;
    background-color: #eee;
}
.conetnt{
    padding: 10px;
    box-sizing: border-box;
}
.items{
    width: 100%;
    height: 110px;
}
.items-top{
    width: 100%;
    height: 80px;
    background-color:red;
    display: flex;
}
.items-bottom{
    width: 100%;
    height: 30px;
    background-color: #eee;
    text-align: left;
    line-height: 30px;
    color: #a6a6a6;
}
.items-top>img{
    width: 75px;
    height: 75px;
    margin: 5px 15px 5px 5px;
}

老师，这个字体出来为啥是水平排列的？

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 535楼

问题：我想请问一下老师，怎样设置能让列表整体居中或居右呢？

!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>
        /* div{
            width:100%;
            text-align:center;
        }   怎样设置能让列表整体位置居中呢？ */
        li{
            list-style-type:none;
            float:left;
            padding:31px 20px 30px;
        }
        a{
            color:#333;
            font-size:14px;
            text-decoration:none;
        }
        a:hover{
            color:#008cff;
        }

    </style>
</head>
<body>
    <div>
    <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">Lipro</a></li>
        <li><a href="#">声学</a></li>
        <li><a href="#">配件</a></li>
        <li><a href="#">生活</a></li>
        <li><a href="#">Flyme</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="#">APP下载</a></li>
    </ul>
<!-- </div> -->
</body>
</html>

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

<div class="zhu">
    <div class="zhu-center">
        < img src="images/u=1487180403,3048898319&fm=15&gp=0.jpg" alt="">
        <div class="center-left">
            <ul>
                <li>< a href=" "><div>手机 电话卡<i class="iconfont">&#xe621</i></div></ a></li>
                <div class="right-list">
                    <ul>
                        <li>< a href="#">
                            < img src="images/c89e7b3a3495acaa0a4df271d9da59ea.png" alt="">
                            <p>小米10S</p >
                        </ a></li>
                    </ul>
                </div>



            </ul>

          </div>
        </div>

    </div>
    
.zhu{
    width: 100%;
    height: 460px;
    position: relative;

}
.zhu-center{
    width: 1226px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -613px;
}
.center-left{
    width: 234px;
    height: 460px;
    padding: 20px 0 ;
    background-color: rgba(105,101,101,.6);
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
}
.center-left li{
    width: 234px;
    height: 42px;
    padding-left: 30px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 42px;
    text-align: left;
}
.center-left a{
    color: #fff;
}
.center-left i{
    float: right;
    padding-right: 20px;
}
.center-left>ul>li:hover{
    background-color: #ff6700;
}
.center-left>ul>li:hover .right-list{
    display: block;
}
.center-left>ul li:hover i{
    color: #e0e0e0;
}
.right-list {
    width: 992px;
    height: 460px;
    position: absolute;
    top: 0;
    left: 234px;
    border: 1px solid #e0e0e0;
    border-left: none;
    background-color: #fff;
    padding: 2px 0;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    display: none;
}
.right-list>ul{
    float: left;
    width: 247.75px;
    height: 100%;
    box-shadow: none;
}
.right-list li{
   height: 76px;
    width: 100%;
    padding: 18px 20px 18px 20px;
    box-sizing: border-box;
}
.right-list p{
    color: #333;
    font-size: 14px;
    line-height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
}
.right-list img{
    float: left;
    margin-right: 14px;
}
.right-list li:hover p{
   color: #ff6700;
}    
  
  
老师，我想问问，怎么我鼠标悬停在左边的li上，右边的list不出现

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

 <link rel="stylesheet" href="CSS/iconfont.css"/>
    <link rel="icon" href="images/title.ico"/>

老师，这俩在哪里能找到？

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 538楼

</head>

<body>

</div>

</div>

</body>

/*导航开始*/

.nav{

width: 100%;

height: 85px;

background-color: skyblue;

}

.logo{

width: 117px;

height: 55px;

margin: 15px 0 15px 30px;

float: left;

}

/*导航结束*/

老师，为啥我每次导入图片，图片都是太大了？iconfont这个代码有啥用？

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

复制图片地址，粘贴过来，运行不显示图片。
复制过去没有.gif后缀怎么办

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

同学您好