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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="work.html" name="biao1" method="post">
用户名：<input type="text" name="user" value="请输入用户名">
<br>
密码：<input type="password" name="password" value="11">
<br>
性别：   <input type="radio" name="性别" value="男">男
        <input type="radio" name="性别" value="女">女
<br>
爱好：
<input type="checkbox" name="like" >读书
<input type="checkbox" name="like">画画
<input type="checkbox" name="like">写字
<input type="checkbox" name="like">科技
<br>
<input type="submit" name="确认" value="确认">
<input type="reset" value="充值">
<input type="button" value="五功能按钮">
<br>

<button type="submit">点我</button>
<button type="reset">点我</button>
</form>
<form action="../003form表单/images/img1.gif">
    <select name="sg" id="sg">
        <option value="bj" >苹果</option>
        <option value="bj" >梨</option>
        <option value="bj" >香蕉</option>
        <option value="bj" >葡萄</option>
    </select>
</form>
<form action="../003form表单/02表单元素1.html" enctype="multipart/form-data">
    <select name="xw" id="xw">
            <optgroup label="我是组1">
                <option value="w">漩涡1</option>
                <option value="w">漩涡2</option>
                <option value="w">漩涡3</option>
                <option value="w">漩涡4</option>
            </optgroup>
        <optgroup label="我是组2">
            <option value="w">漩涡1</option>
            <option value="w">漩涡2</option>
            <option value="w">漩涡3</option>
        </optgroup>

    </select>
    <p>
        <input type="radio" name="性别" value="男" id="男">
        <label for="男">男</label>
        <input type="radio" name="性别" value="女" id="女">
        <label for="女">女</label>
    </p>
    <p>
        <textarea id="留言板">请输入留言
        </textarea>
    </p>
    <p>
        <input type="image" src="img2.gif">
    </p>
    <input type="file" >

</form>
</body>
</html>

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

问题就是，为什么footer容器夹在侧边栏和主要内容之间了呢

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

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

input{

border: 1px solid gray;

}

input:focus{

border: 1px solid blue;

}

</style>

</head>

<body>

</body>

</html>

当焦点放在输入框并没有变成蓝色，求解

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

<!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">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:600px;
            height:1200px;
            margin:auto;
            background:rgb(14, 112, 128);
        }
        #box > h2{
            padding:50px;
            padding-bottom:15px;
            text-align:center;
            color:white;
        }
        #box > h2:nth-child(2){
            padding-top:0px;
            color:yellow;
        }
        #box > h3{
            height:40px;
            text-align:center;
            line-height:40px;
            color:white;
            border:1px solid red;
        }
        #box > h3 > i{
            font-size:30px;
            color:white;
        }
        #box > .content{
            width:100%;
            height:280px;
            margin-top:20px;
        }
        #box > .content .content_center{
            width:75%;
            height:100%;
            margin:auto;
        }
        #box > .content .content_center .content_center_left{
            float:left;
            width:60%;
            height:100%;
        }
        #box > .content .content_center .content_center_left .content_center_left_top{
            width:100%;
            height:60px;
            text-align:center;
            color:white;
            line-height:60px;
            font-size:20px;
        }
        #box > .content .content_center .content_center_left .content_center_left_bottom{
            width:220px;
            height:220px;
            margin:auto;
            background:pink;
        }
        #box > .content .content_center .content_center_right{
            float:left;
            width:40%;
            height:100%;
        }
        #box > .content .content_center .content_center_right .content_center_right_center{
            float:right;
            width:80%;
            height:100%;
            padding-top:8px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_top{
            width:100%;
            height:120px;
        }   
        #box > .content .content_center .content_center_right .content_center_right_center .fz{
            width:100%;
            height:40%;
            font-size:20px;
            color:white;
            line-height:48px;
            text-align:center;
            cursor: pointer;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .lj{
            width:100%;
            height:46%;
            text-align:center;
            line-height:55px;
            border-radius:30px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzje{
            background:yellow;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .fzlj{
            background:white;
            margin-top:0px;
        }
        #box > .content .content_center .content_center_right .content_center_right_center .content_center_right_center_bottom{
            width:100%;
            height:120px;
            margin-top:50px;
        }
        #box > .ziduan{
            width:100%;
            margin-top:40px;
            color:white;
        }
        #box > .ziduan > p{
            margin-left:20px;
            line-height:40px;
        }
    </style>
</head>
<body>

    <div id="box">
        <h2>请使用USDT-TRC20支付转账</h2>
        <h2>转账数量需严格要求, 数量错误将不会到账</h2>
        <h3> <i class="iconfont icon-naozhong"></i> 有效时间 : <span class="shi">10</span>:<span class="fen">00</span>:<span class="miao">00</span></h3>
        <div class="content">
            <div class="content_center">
                <div class="content_center_left">
                    <div class="content_center_left_top">
                        马上扫码去转账
                    </div>
                    <div class="content_center_left_bottom"></div>
                </div>
                <div class="content_center_right">
                    <div class="content_center_right_center">
                        <div class="content_center_right_center_top">
                            <div class="fz">复制金额</div>
                            <div class="lj fzje">15.38 USDT</div>
                        </div>
                        <div class="content_center_right_center_bottom">
                            <div class="fz">复制链接</div>
                            <div class="lj fzlj">链接</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ziduan">
            <p>温馨提醒</p>
            <p>1. 请勿向上述地址充值任何非USDT-TRC20资产, 否则资产将不可找回</p>
            <p>2. 您充值至上述地址后, 需整个网络节点的确认, 多次网络确认后到账</p>
            <p>3. 务必确保最终到账金额为15.38USDT, 不包含额外手续费, 其他不符金额都不自动到账</p>
            <p>4. 该地址只能使用一次, 重复使用会造成资产丢失</p>
        </div>
    </div>
    
</body>
</html>

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

.content{
    width: 100%;
    overflow: hidden;
    padding: 4px 0 12px;
}
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.yang-left{
    width: 234px;
    height: 100%;
    background-color: #ff6700;
    float: left;
}
.yang-right{
    width: 992px;
    height: 614px;
    float: left;
}
.yang-left img{
    width: 234px;
    height: 614px;
}
.items1{
    width: 234px;
    height: 300px;
    background-color: #e0e0e0;
    padding: 20px 0;
    margin: 0 0 14px 14px;
    float: left;
    transition: all .2s linear;
    box-sizing: border-box;
}
.img1{
    width: 164px;
    margin-bottom: 18px;
}
.items1:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
.name1{
    width: 214px;
    height: 20.8;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 auto 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name2{
    width: 214px;
    height: 18px;
    color: #b0b0b0;
    font-size: 12px;
    line-height: 18px;
    margin: 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.name3{
    width: 214px;
    height: 20.8px;
    color: #ff6700;
    font-size: 14px;
    line-height: 18px;
    margin: 0 10px 14px;
}
.big-img{
    width: 1226px;
    height: 120px;
    margin: 22px 0;
}
老师，line-height: 21px这个不加可以吗？white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsi这行代码有啥用？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form练习</title>
</head>
<body>
<form action="work.html" enctype="multipart/form-data">
    <p>
        姓名：<input type="text" value="大傻" disabled>
    </p>
    <p>
        密码: <input type="password">
    </p>
    <p>
        性别：<input type="radio" id="男" checked name="性别">
        <label for="男">男</label>
        <input type="radio" id="女" name="性别">
        <label for="女">女</label>

    </p>
    <p>
        喜欢的水果：
        <input type="checkbox" id="桃" name="水果">
        <label for="桃">桃</label>
        <input type="checkbox" id="苹果" name="水果">
        <label for="苹果">苹果</label>
        <input type="checkbox" id="梨" name="水果">
        <label for="梨">梨</label>
    </p>

    <input type="file">
    <input type="image" src="img2.gif">
    <p>
        <input type="submit" value="提交表单">
    </p>
    <p>
        <input type="reset" value="点我重制">
    </p>
    <p>
        <input type="button" value="我并没卵用">
    </p>
    <p>
        表单1：<select name="数字" id="">
            <option value="">11</option>
            <option value="">22</option>
            <option value="" selected>33</option>
            <option value="">44</option>
            <option value="">55</option>
            <option value="">66</option>
            <option value="">77</option>
            <option value="">88</option>
            <option value="">99</option>
            <option value="">00</option>
        </select>
    </p>
    <p>
        表单2：<select name="字母" id="">
            <optgroup label="数字">
                <option value="">a</option>
                <option value="">22b</option>
                <option value="">33c</option>
                <option value="">44d</option>
            </optgroup>
            <optgroup label="字母">
                <option value="">55e</option>
                <option value="">66f</option>
                <option value="" selected>77g</option>
                <option value="">88h</option>
                <option value="">99i</option>
                <option value="">00g</option>
            </optgroup>
        </select>
    </p>
    <p>
        <textarea name="" id="liu" cols="30" rows="10">留言板：
        </textarea>
    </p>
    <p>
        <input type="hidden">
        <button type="submit">按键1</button>
    </p>
</form>
</body>
</html>

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

无序列表的嵌套这种格式是可行的吗
<ul>
    <li>中国</li>
    <ul>
        <li>沈阳</li>
        <ul>
            <li>大东区</li>
            <li>和平区</li>
            <li>浑南区</li>
        </ul>
        <li>赤峰</li>
        <li>辽阳</li>
    </ul>
    <li>法国</li>
    <li>英国</li>
</ul>

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

语义化是什么意思？？？？？

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

这里是不是写错了，1B=8b吧，我看文件上写是是8b

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

小米手机官网.zip

老师我这个banner做完以后白色导航的那个hover怎么显示不出来？

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

我设置1240宽度的时候，margin属性不能自动居中，为什么

当我缩小宽度到1000左右时，左右留白的宽度才不会相差太大

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

 <style>
        @media screen (max: width 768px){
            background-color:red;
        }
    </style>

@media screen (max: width 768px){
            background-color:red;
        }

老师，我这行代码是哪里不对吗？

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

老师，为什么我的图片在设置“小米手机”这行字的时候就居中了，然后跟着视频中再设置margin-top的时候，就成下图这样了，这是什么问题

小米.rar

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

<style>
        @media screen and (max: width 768px;){
            background-color: red;
        }
    </style>

写完之后，下面颜色出不来

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

老师，pc端响应式布局和原来不一样，请问是怎么回事？

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>米课</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mike.css">
</head>
<body>
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo"></div>
        <div class="search">
            <form action="">
                <input type="text" placeholder="查找课程..." class="text-input">
                <button class="iconfont">&#xe64d;</button>
            </form>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="#" class="nav-bar-active">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">公告</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
</div>
<!--导航结束-->
</body>
</html>

css样式

/*导航开始样式*/
.nav{
    width: 100%;
    height: 66px;
    background-color: #88c5e1;
    border-bottom: 5px solid #54abd4;
    position: fixed;
    top: 0;
    left: 0;
}
.wrap{
    width: 87%;
    height: 66px;
    margin: 0 auto;
}
.logo,.search,.nav-bar{
    height: 66px;
    float: left;
}
.text-input{
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    margin-top: 13px;
    border-radius: 2px;
    outline: none;
    padding-left: 10px;
}
.search button{
    width: 40px;
    height: 34px;
    background-color: #f5f5f5;
    position: absolute;
    right: 2px;
    top: 16px;
    color: #54abd4;
    font-weight: 900;
}
.text-input:hover{
    background-color: #ffffff;
    border-color: #54abd4;
}

.nav-bar>ul{
    float: right;
}
.nav-bar li{
    float: left;
}
.nav-bar a{
    color: #ffffff;
    padding: 10px;
    display: block;
    margin-left: 8px;
    margin-top: 12.5px;
}
.nav-bar-active{
    border-bottom: 2px solid #ffffff;
}
.nav-bar a:hover{
    border-bottom: 2px solid #ffffff;
}
/*导航开始结束*/
/*移动端开始*/
@media screen and(max-width: 768px) {
    
}
/*移动端结束*/
/*ipad开始*/
@media screen and(max-width: 992px) and(min-width: 768px) {

}
/*ipad结束*/
/*pc端开始*/
@media screen and(min-width: 992px) {
    .logo{
        width: 25%;
        background: url("../images/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
}

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

同学您好