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

<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模块/表单 151楼

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

<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新增元素 153楼

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

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

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

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

为啥Microsoft Edge 打开界面显示是百度

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .nav {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #666;
      }

      .nav ul {
        width: 1200px;
        margin: 0 auto;
      }

      .nav ul::after {
        content: "";
        display: block;
        clear: both;
      }

      .nav ul li {
        list-style: none;
        float: left;
        padding: 0 30px;
      }
      .nav ul li a {
        color: #b0b0b0;
        text-decoration: none;
        font-size: 20px;
      }
      .nav ul li a:hover {
        color: white;
      }

      .nav ul li:hover {
        background-color: #222;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <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>
      <p>这是一个p标签</p>
    </div>
  </body>
</html>

这个要实现鼠标在导航上方的时候li的背景颜色和字体颜色同时改变要如何实现呀老师

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol > li {
            color: red;
        }
    </style>
</head>
<body>
   <ol>
        <li>合肥</li>
        <li>淮北
            <ol>
                <li>相山区</li>
                <li>濉溪县</li>
                <li>烈山区</li>
            </ol>
        </li>
        <li>巢湖</li>
    </ol>
</body>

</html>

你好，老师。我这个子代选择器的书写li标签里嵌套的ol li标签为什么也生效了，能帮忙看看哪里出了问题吗

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

此处的ellipsis是什么意思啊，老师

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

在引入图片时相对路径和绝对路径有什么区别吗，

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

为什么我的main主要内容和侧边栏显示不出来，代码如下：
<!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>
        .container{
            width: 1400px;
            margin: 0 auto;
        }
        .header{
            height: 80px;
            margin-top: 10px;
            background:pink
        }
        .nav{
            height: 80px;
            margin-top: 10px;
            background: pink;
        }
        .main{
            height: 500px;
            margin-top: 10px;
        }  
        .mian .left{
            float: left;
            width: 900px;
            height: 500px;
            background: pink;
        }
        .mian .right{
            float: right;
            width: 480px;
            height: 500px;
            background: pink;
        }
        .footer{
            height: 80px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="nav">导航</div>
        <div class="main">
            <div class="left">主要内容</div>
            <div class="right">侧边栏</div>
        </div>
        <div class="footer">脚部</div>
    </div>
</body>
</html>

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

问题一：

a、描述：表单之间不能套表单，那么表格里面是否可以套用表单或者说表单里面是否可以套一个表格？

b、如果可以套用那么表单的重置按钮是否可以达到清除表格里面已经填写的内容？是否有效？

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

老师，请问作业提交到哪里啊？

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

头部图片直接设置宽度100%可以居中，这种方式可以用吧？

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

<form>
    <select name="my">
        <optgroup label="城市">
            <option value="">北京</option>
            <option value="">上海</option>
                <option value="">广东</option>
         </optgroup>
     </select>
</form>

问题描述：下拉列表那显示：城市（且不可选中）如何实现？

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

同学您好