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

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

为什么会这样啊1

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

<style>

.root{

width: 500px;

height: 500px;

}

.left{

float: left;

width: 250px;

height: 500px;

background-color: firebrick;

}

.right{

float: left;

width: 250px;

height: 500px;

background-color: cyan;

}

.top{

width: 250px;

height: 250px;

background-color: pink;

}

.bottom{

width: 250px;

height: 250px;

background-color: darkblue;

}

</style>

</head>

<body>

</div>

</div>

</body>

老师，left那个颜色为什么被覆盖了

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

感觉效果出不来，我已经跟老师改的差不多了，但是还是没变化，一直这样。

04.商城官网_banner.zip

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

为什么我的shift+alt+up/down用不了

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

老师我想问一下，购物车的鼠标滑动之后的边框不显示想问一下我写的CSS哪里出了问题。

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

<ul>

<li><a href="https://bjsxt.com">尚学堂合作</a></li>

<li><a href="https://itbaizhan.cn">百战程序员</a></li>

</ul>

什么情况下适合使用a href="#"?

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

老师，为什么我加了浮动为什么还是竖着摆放的啊？

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.boot {

width: 600px;

height: 600px;

background-color: azure;

}

.left {

width: 300px;

height: 600px;

background-color: pink;

float: left;

}

.right{

width: 400px;

height: 600px;

background-color: aquamarine;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

老师，为什么我的这个不显示图片

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

这里写value的意义是什么？

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

<html lang="en">和<html>是一样的么

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

<!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>
<style>
    .phone {
        width: 1300px;
        height: 680px;
        margin: 0 auto;
        background-color: bisque;
    }

    .left {
        width: 234px;
        height: 680px;
        background-color: rgb(236, 41, 7);
    }

    .right {
        float: right;
        width: 1050;
        height: 680px;
        background-color: aliceblue;
    }

    .box {
        float: left;
        width: 250px;
        height: 300px;
        background-color: black;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>

<body>
    <div class="phone">
        <div class="left"></div>
        <div class="right">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>

</html>

老師，我的網頁加載后right裏面内容都向下排列了

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

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

<!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 auto;
        
    }

    .container{
        width: 1200px;
        background-color: rgb(173, 151, 200);
        margin:20px auto;
        padding-bottom: 10px;
        border-radius: 20px;
        
    }

    .t-box{
        display: flex;
        width: 1160px;
        height: 50px;
        align-items: center;
        justify-content: flex-start;
    }

    .b-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 1160px;
        height: 150px;
        background-color: white;
        border-radius: 20px;
        background-attachment: scroll; /*左右滚动*/
        
        
    }
    
    .rs{
        font-weight:800;
        font-size: larger;
        color: rgb(25, 24, 34);
        margin-left: 13px;
       
        
    }
    
    .rs span{
        padding-left: 15px;
        font-size: medium;
        font-family: "楷体";
    }

    .btn{
        margin-right: 15px;
        border-radius: 25px;
        padding: 5px 10px;
        border: none;
        letter-spacing: 2px;
        color: rgb(92, 80, 118);
    }

    .t-txt,.b-txt{
        display: flex;
        align-items: center;
        justify-content: space-around;
        white-space: nowrap;
        height: 70px;
        width: 1150px;
        border: 1px solid;
        /* white-space: nowrap; */
        background-attachment: auto; /*左右滚动*/
        
    }

    .b-box .txt{
        
        line-height: 70px;
        box-sizing: border-box; /*依旧变形*/
        width: 100px;
        height: 45px;
        background-color: rgb(173, 151, 200);
        margin-right: 10px;
        
    }


   </style>
</head>
<body>
   
    <div class="container">
        <div class="t-box">
            <p class="rs">粉丝热搜<span>大家都在看</span></p>  
            <button class="btn">查看全部 ❥</button>      
        </div>
        <div class="b-box">
            <div class="t-txt">
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
            </div>
            <div class="b-txt">
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
                <div class="txt"></div>
            </div>
           
        </div>
    </div>

</body>
</html>

如上，底部内容位置里面有好多小盒子，我想让超出部分横向滚动，但是好像不行，添加新的盒子其他盒子就会挤压变形平分区域没法超出屏幕横向滚动。请老师指点我该怎么写

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

同学您好