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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</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>
            <li>
                <a href="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">
                <img src="小米images/692a6c3b0a93a24f74a29c0f9d68ec71.png" alt="">购物车</a>
                <div class="cart-list">
                </div>
            </li>
        </ul>
    </div>
</div>
<!--黑色导航部分结束-->
</body>
</html>

/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
    height: 40px;
    position: relative;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
.black-nav-right img {
    height: 40px;
}
a:hover{
    color: deepskyblue;
}
.cart-list{
    width: 316px;
    height: 78px;
    background: deeppink;
    position: absolute;
    top: 40px;
    left:660px;
    display: none;
}
.black-nav-right li:hover>.cart-list{
    display: block;
}
/*黑色导航结束*/

现在我的鼠标放到第一个列表上的时候，为什么字体颜色不变成蓝色了呢

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

用伪对象处理塌陷的原理是啥呀

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

为什么鼠标悬停在box上，图片2不往右移动

<!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>实操二：定位练习3</title>
    <style>
        p{
            margin:0;
            padding:0;
        }
        a{
            text-decoration:none;
        }
        .box{
            width:290px;
            height:390px;
            text-align:center;
            position:relative;
        }
        img{
            width:120px;
            height:240px;
            position:absolute;
            left:85px;
            top:15px;
        }
        .box:hover>.img1{
            left:40px;
        }
        /* 为什么鼠标悬停在box上，图片2不移动？ */
        .box:hover>.img2{
            left:130px;
        }
        .title{
            color:#333;
            margin-bottom:2px;
        }
        .desc{
            color:#999;
            font-size:14px;
       }
       .price{
            color:#c00;
            font-size:22px;
        }
        span{
        color:#c00;
        font-size:14px;
        margin-bottom:3px;
        }
        .text{
            width:290px;
            height:80px;
            position:absolute;
            bottom:30px;
            left:0;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="引用图片/img9.jpeg" alt="" class="img1">
        <img src="引用图片/img10.jpeg" alt="" calss="img2">
        <a href="#">
            <div class="text">
                <p class=title>金立S11</p>
                <p class="desc">超高清屏 超高性价比</p>
                <p class="price"><span>￥</span>2299</p>
            </div>
        </a>
    </div>
</body>
</html>

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

老师，这里可不可以不写ul li：first-child中的ul

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

老师您好！请问5分20秒中，位移取值为百分比时，这个百分比是父元素的百分比还是自身长度的百分比呢？

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

用户名:<input type="text" name="userName" value="" />

<br>

密码:<input type="password" name="password" />

<br>

性别:

<input type="radio" name="s=man" />男

<input type="radio" name="woman" />女

<input type="radio" name="hemophrodite" />人妖

</body>

</html>

老师我想问一下，为什么我鼠标左键会出现这些名字。。

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

<!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>
        .square{
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
        }
        .left{
            float: left;
            width: 200px;
            height: 600px;
            background-color: pink;
        }
        .right{
            float: right;
            width: 400px;
            height: 600px;
            background-color: green;
        }
        .top{
            width: 400px;
            height: 300px;
            background-color: springgreen;
        }
        .zuo{
            float: left;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
        .you{
            float: right;
            width: 200px;
            height: 300px;
            background-color: chocolate;
        }
    </style>

</head>
<body>
   
    <div class="square">
        <div class="left"></div>
        <div class="right">
            <div class="top"></div>
            <div class="bottom">
                <div class="zuo"></div>
                <div class="you"></div>
            </div>
        </div>
    </div>

</body>
</html>

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

<!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>
        .square {
            width: 400px;
            height: 400px;
        }
        .left{
            float: left;
            width: 200px;
            height:200px;
            background-color: cyan;
        }
        .right {
            float: left;
            width: 200px;
            height: 400px;
            background-color: chocolate;
        }
        .top {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }

        .bottom {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

       
    </style>

</head>

<body>

    <div class="square">
        <div class="left">
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
        <div class="right"></div>
    </div>
   
   

</body>

</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td>
                <form>
                    <input type="text">
                </form>
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <form>
                    <input type="password">
                </form>
            </td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td>
                <form>
                    <input type="password">
                </form>
            </td>
        </tr>
        <tr>
            <td>密码提示问题:</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择一个问题</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td>密码提示答案:</td>
            <form>
                <input type="text">
            </form>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <form>
                    <input type="radio" name="sex">男<br>
                    <input type="radio" name="sex">女
                </form>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td>
                <form>
                    <input type="number">
                </form>
            </td>
        </tr>
        <tr>
            <td>籍贯:</td>
            <td>
                <form>
                    <select>
                        <option value="title">请选择</option>
                    </select>
                    省/直辖市
                    <select>
                        <option value="title">请选择</option>
                    </select>
                    市<br>
                </form>
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td>
                <form>
                    <input type="checkbox" value="1">上网
                    <input type="checkbox" value="2">看电影
                    <input type="checkbox" value="3">学习
                </form>
            </td>
        </tr>
        <tr>
            <td>个人介绍:</td>
            <td></td>
        </tr>
        <tr>
            <td>上传头像</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>
老师我的table外面有一个input框不知道是哪里来的，找不到

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

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

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

老师我找到问题了，我的密码题答案中少了一个td

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

为什么“家电”跑到上面去了，咋办

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

清除浮动之后为什么只会清掉副作用，而不会清掉正作用；清除浮动需要考虑优先级吗？

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

<button class="iconfont">&#xe63d;</button>

老师，本来应该是放大镜图标，我的怎么显示这个？

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

同学您好