有效沟通问答-【官方】百战程序员_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>Document</title>
    <style>
       video{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        <video src="games.mp4" muted controls autoplay ></video>
        <audio src="returns.mp3" controls autoplay></audio>
    </div>
</body>
</html>
打开网页，为什么音频不能自动播放呢

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

什么情况下需要写name，和value属性；单选和复选框不写value属性，可以吗？

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

<!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>
        .nav{
            width: 100%;
            height: 60px;
            background-color: black;
        }

        .nav ul{
            overflow: hidden;
            clear: both;
        }

        .nav ul li{
            list-style: none;
            float: left;
            padding: 20px 25px;
        }

        .nav ul li a{
            color: aqua;
            text-decoration: none;
            font-size: 30px;
        }
        .box{
            width: 100%;
            height: 300px;
            position: absolute;
            left: 0%;
            display:none;
        }

        .nav li:hover>.box{
            display: block;
        }


    </style>

</head>
<body>
   
    <div class="nav">
        <ul>
            <li><a href="#">首页</a>    
            <div class="box" style="background-color: red;"></div><!--这个就是下拉列代表的容器-->
        </li>
            <li><a href="#">手机</a>    
            <div class="box" style="background-color: gold;"></div>
        </li>


            <li><a href="#">配件</a>    
            <div class="box" style="background-color: green;"></div>
        </li>

            <li><a href="#">电脑</a>    
            <div class="box" style="background-color: blanchedalmond;"></div>
        </li>
            <li><a href="#">手表</a>    
            <div class="box" style="background-color: blue;"></div>
        </li>
        </ul>
    </div>

</body>
</html>

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

视频里vertical-align这个属性设给图片如果设给文本可以达到同样的效果吗

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

下拉列表中的option属性中，可不可以不写value属性，直接写要下拉的文本？

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

<!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>
    <link rel="stylesheet" href="css1/reset.css">
    <style>
        .box{
            box-sizing: border-box;
            width: 234px;
            height: 320px;
            padding: 20px 0;
            position: relative;
            text-align: center;
            background-color: coral;
            margin: 10px;
        }
        .box img{
            width: 80px;
            height: 160px;
            position: absolute;
            top: 21px;
            left: 77px;


        }
        .box>img:first-child{
            z-index: 10;
        }
        .box2{
            position: absolute;
            top:204px;
            background-color: yellow;
            width: 100%;
            height: 102px;
            text-align: center;
        }
        p{margin-bottom: 1px ;
      }
      .box2>p:last-child{
          margin-top: 10px;
      }

      .box:hover>img:first-child{
          left:40px
      }
      .box:hover>img:last-child{
       left:114px
      }
    </style>
</head>
<body>
   
<div class="box">
    <img src="images/position练习3.jpg" alt="">
    <img src="images/22.jpg" alt="" class="i2">
       <div class="box2">
          <p>黑鲨4S</p>
          <p>磁动力升降肩键</p>
          <p>2699元起</p>

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

老师为啥用这个 last-child选择器不生效用类选择器.i2就会生效？要有三个img才可以使用last-child嘛？

.box:hover>img:last-child{
       left:114px
      }

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

opacity透明度这个属性一般用在什么场景呢我感觉改颜色也能达到效果吧

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

老师，您好。可不可以子元素先display:none,然后移入父级，子级显示在定位。我的作业就是按照这个做法做的没有用父级的overflow：hidden。老师这样可以吗？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移入显示</title>
    <style>
        .dad {
            width: 200px;
            height: 300px;
            background: tomato;
            position: relative;
        }
        
        .son {
            display: none;
        }
        
        .dad:hover>.son {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: skyblue;
        }
    </style>

</head>

<body>
    <div class="dad">
        <div class="son">son</div>
    </div>
</body>

</html>

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

这个搜索图标显示不出来这个搜索框也上不去

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

定位实操（图片上定位文字）.zip

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

<body>
    <table align="center">
        <tr>
            <td align="right">姓名：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">密码提示问题：</td>
            <td>
                <select name="" id="">
                    <option value="">请选择一个问题</option>
                    <option value="">问题1-----</option>
                    <option value="">问题2-----</option>
                    <option value="">问题3-----</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">密码提示答案：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td align="right">年龄：</td>
            <td>
                <input type="number" min="1" max="150">
            </td>
        </tr>
        <tr>
            <td align="right">籍贯：</td>
            <td>
                <select name="" id="">  
                    <option value="">请选择</option>
                    <option value="">甘肃</option>
                    <option value="">江苏</option>
                    <option value="">陕西</option>
                </select>省/直辖市
                <select name="" id="">请选择
                    <option value="">兰州</option>
                    <option value="">苏州</option>
                    <option value="">宝鸡</option>
                </select>市
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <input type="checkbox" name="love" value="上网">上网
                <input type="checkbox" name="love" value="看电影">看电影
                <input type="checkbox" name="love" value="学习">学习

            </td>
        </tr>
        <tr>
            <td align="right">个人介绍：</td>
            <td>
                <textarea cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="确认提交">
                <input type="reset" value="重新输入">
            </td>
        </tr>
    </table>
</body>

按钮想生效，不得用form把整个表格放到里面去吗，

为啥只有我提交的代码时黑白的~~~

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(135deg, #99ccff, #9999ff, #cc66ff);
            position: relative;   /*子元素都将相对于body定位*/
        }

        .box {
            width: 50px;
            height: 300px;
            background-image: linear-gradient(135deg, #66ffff, #66ccff, #6699ff);
            border-radius: 0 30px 30px 0;
            opacity: 0.4;
            transition: all 0.6s ease; /*侧边栏由透明变成有色并且伸展的效果动画时间*/
            position: absolute; 
            left: 200px   /*侧边栏将相对于body进行一个相对定位，据左边200px*/
        }

        ul {
            display: flex;
            height: 300px; /*给ul设定一个高度与容器高度一样，才可设置上下居中*/
            flex-direction: column;
            align-items: left;
            justify-content: center;
            padding-left: 25px;
            list-style: none;
            position: absolute; /*子元素都将相对于body定位*/
            left:200px ;  /*无序列表ul每个元素都将相对于body进行一个相对定位，据左边200px*/
            opacity: 0;
            transition: all 0.6s ease 0.6s;
        }

        ul li {
            margin: 12px 1px;
            
            /* display: none; */
            
        }

        ul li a{
            text-decoration: none ;
            color: white;
            text-shadow: -5px 5px 15px #bd4be3;
            font-size: 20px;
            font-weight: 700;
            
        }

        .t-box{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-image: linear-gradient(135deg, #66ffff, #66ccff, #6699ff);
            margin-top: 20px;
            position: absolute;
            top: 160px;
            left: 200px;
        }

        .t-box:hover+.box{
            opacity: 1;
            width: 100px;
            height: 300px;
        }

        /* 在鼠标接触到的时候t-box的时候使其相邻兄弟元素box拉伸 */

       .t-box:hover~ul{
            
            opacity: 1;
       }

       
        
    </style>
</head>

<body>
    <div class="t-box"></div>
    <div class="box"></div>
    <ul>
        <li><a href="#">Play</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Map</a></li>
        <li><a href="#">Chart</a></li>
        <li><a href="#">Art</a></li>

    </ul>

   
</body>

</html>

如上做了一个丝滑的伸缩侧边栏，字体动画在栏伸展开之后才显示。问题是放开鼠标之后栏缩回去的时候，字体没有立刻消失，而是过了一会儿才消失。怎样设置才能让字体消失的时候也和菜单栏一起同一时间小时呢？

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

<style lang="scss">
page{
    .cate-section{
	position:relative;
	z-index:5;
	border-radius:16upx 16upx 0 0;
	margin-top:-20upx;
    }
}

.cate-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap:wrap;
    padding: 30upx 22upx; 
    background: #fff;
    }
</style>

这种写法中的 page 的作用是什么？为什么这么写？这个百度没有找到对应的解释

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

为什么在type值为radio时 value值为0 按键没有变化当type为 subimt时 value却能改变按键的名称？

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

无法解析。这是下一级的输入/115.jpg无法解析文件夹是另行创建的都存在里边

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

同学您好