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

JAVA 全系列

Python 全系列

Python入门

Python 深入与提高

Hadoop 分布式文件系统：HDFS（扩展）

Hadoop 分布式计算框架：Mapreduce（扩展）

AIGC人工智能工具全能班

Stable Diffusion（自选模型）AI绘图

大厂算法特训班

C++特训班

大数据全系列

Hadoop 分布式计算MapReduce和资源管理Yarn

人工智能

人工智能基础-Python科学计算和可视化

深度学习-目标检测YOLO(V8正在更新中)实战

【加课】百度飞桨PaddlePaddle实战【新增】

【加课】Linux 环境编程基础

【加课】算法与数据结构

【加课】C++基础【新增】

【加课】计算机图形学/机器视觉实战【新增】

微服务

SpringBoot与MybatisPlus

租房网（Spring Cloud最新架构）

Spring Cloud Alibaba技术栈

软件测试全系列

Java编程基础和Java Web开发基础

7u职场软实力

毕设项目

计算机考研408

会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 128427个问题

时间排序推荐排序

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

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

<ul>

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

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

</ul>

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

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

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

<!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 3楼

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

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

这里写value的意义是什么？

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

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

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

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

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

<!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模块/浮动与定位 9楼

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

        .box{
            width: 800px;
            height: 50px;
            background-image: linear-gradient(20deg,rgb(69, 120, 221),rgb(44, 172, 222),rgb(29, 203, 177));
            border-radius: 30px;
            margin: 0 auto;
            
        }
        
        ul{
            list-style: none;
            display: flex;    /*父元素设置为弹性容器，默认为横向排列*/
            justify-content: center;
            line-height: 50px; /*设置上下居中*/
            
        }


        ul a{
            color: rgb(173, 10, 232);
            text-decoration: none; /*去除下划线*/
            margin:0 10px;         
            font-size: 20px;
            font-weight: bolder;

        }

        a:visited{
            color: rgb(173, 10, 232);
        }

        a:hover{
            color: rgb(43, 226, 192);
        }

        a:active{
            color: hotpink;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#">生活</li>
            <li><a href="#">萌宠</li>
            <li><a href="#">游戏</li>
            <li><a href="#">动漫</li>
            <li><a href="#">电视剧</li>
        </ul>
    </div>
</body>
</html>

老师我这样已经实现了内容上下左右居中对齐，并且整齐排列的导航栏效果。但是当我去掉line-height属性，将其变为盒子模型属性align-items想让他直接竖直居中对齐，结果失败了。为什么？我改过ul a{}里面的margin属性去掉了上下为0的设置，结果还是实现不了垂直方向居中。

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

小米手机官网.zip

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

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

这三个属性不能同时使用吗，三个同时autofocus没有作用，是不是我哪里写错了

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

章节13 商城官网项目.zip

跟着老师做的，在我电脑上没有运行出来黑色导航区域，都跑到顶部去了，之后在下载app和购物车上悬浮也没完全出现，不知道什么原因？

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

 <ul class="nav-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a><span>|</span></li>
                <li class="cart">
                    <a href="#">
                        <span class="iconfont">&#xf0179;</span>
                        <span>购物车(0)</span>
                        <div class="str2">
                            购物车中还没有商品，赶紧选购吧
                        </div>
                    </a>
                </li>
            </ul>
 
 .str2 {
    width: 250px;
    height: 0;
    overflow: hidden;
    background-color: #424242;        
    position: absolute;
    right: 0;
    top: 40px;
    left: 50%;
    margin-left: -122px;
    line-height: 100px;
    transition: all 0.3s;
}
.cart:hover>.str2 {
    height: 100px;
}

没有出现框

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

 <li class="cart">
     <a href="#">
        <span class="iconfont">&#xf0179;</span>
        <span>购物车(0)</span>
        <div class="str2">
            购物车中还没有商品，赶紧选购吧
        </div>
      </a>
 </li>
 .cart:hover>a{
    color: #ff6767;
 }

购物车字体不生效

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

同学您好