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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片练习</title>
</head>
<body>
<h3 align="center">手机</h3>
<p align="center">
    <img src="../../../img1.jpg.webp" alt="这是一个手机"title="华为手机">
</p>
<p align="center">
    华为 HUAWEI nova 8 Pro 麒麟985 5G SoC芯片 视频双镜头视频双镜头
    <br/>
    120Hz环幕屏8GB+128GB 亮黑色全网通5G手机套餐一（无充电器和数据线）
</p>
<p align="center">
    ￥3799.00
</p>

</body>
</html>

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

老师您好!
请问看视频笔记记不完整咋办？

WEB前端全系列/第一阶段：HTML5+CSS3模块/前端入门与基础知识 395楼

<style>
        .container{
            width: 1400px;
            height: 1400px;
            margin: 0 auto;
            background-color: brown;
        }
        .header{
            height:80px;
            background-color: antiquewhite;
        }
        .nav{
            height:80px;
            margin-top: 10px;
            background-color: antiquewhite;
        }
        .main{
            height:80px;
            margin-top: 10px;
        }
        .left{
            float: left;
            width: 900px;
            height: 600px;
            background-color: bisque;
        }
        .right{
            float: right;
            width: 480px;
            height: 600px;
            background-color: antiquewhite;
        }
        .footer{
            height: 80px;
            margin-top: 10px;
            background-color: bisque;
        }
        
 </style>
 <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>
跟着老师敲的代码，怎么运行出来最后一个footer容器怎么是这样显示的

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

vertical这个是垂直的意思吗

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

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.col {

padding-top: 10px;

padding-bottom: 10px;

background-color: rgba(86,61,124,0.15);

border: 1px solid rgba(86,61,124,0.2);

}

</style>

</head>

<body>

</div>

</body>

</html>

老师我这里的代码打上去之后，不管怎么修改界面都是一行一个格子，我弄了好久都没有找到问题

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

软件的安装包和插件可以发下吗

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

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

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

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

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

<!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选择器 403楼

<!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基础元素 404楼

.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新特性 405楼

同学您好