哭了哭了因为知识基础不是很熟，请问一下盒子移动不了位置是出了什么情况吗


<!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>作业2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="header w">
            <div class="logo">
                 <img src="千库.png" alt="">
            </div>
            <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>
            </div>
        </div>
        <div class="banner">
            <div class="w">
                <div class="subnav">
                    <ul>
                        <li><a href="#"> <span class="subnav"> </span></a></li>
                    </ul>
                </div>
                <div class="fr"></div>
                <div class="fl">
                    <ul>
                        <li><a href="#"> <span class="fl"> </span></a></li>
                    </ul>
                </div>
                
            </div>
        </div>
</body>
</html>


 {
    margin: 0;
    padding: 0;
}
.w {
    width: 1920px;
    margin: auto;
}
body {
    background-color:transparent;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
}
.clearfix:after {
    clear:both;
}
.clearfix {
     *zoom:1;
}
.header{
    height: 90px;
    margin: auto;
    background:black;
    opacity: 0.4;
}
.logo{
    float:left;
    weight:47px;
    height: 90px;
    padding-top: 20px;
    margin-left: 400px;
}
.nav{
    float:left;
    margin-left: 204px;
}
.nav ul li{
    float:left;
    margin: 0 45px;
}
.nav ul li a {
    display: block;
    height: 90px;
    padding: 0px;
    line-height: 90px;
    font-size: 18px;
    color: white;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #ff812a;
    color: #ff812a;
}
.banner {
    height: 688px;
    background-color:transparent;
}
.banner .w {
    height: 688px;
    background: url(4573.png) no-repeat top center;
    background-size: cover;
}
.subnav {
    float: left;
    width: 100px;
    height: 688px;
    display :inline-block;
    position: relative;
    background-color:black;
}
.subnav::after {
    display: inline-block;
    content: " ";
    height: 45px;
    width: 50px;
    border-width: 3px 3px 0 0;
    border-color: white;
    border-style: solid;
    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0);
    position: absolute;
    top: 48%;
    left: 100px;
}
.fr{
    float: left;
    width:935px;
    height: 359px;
    background:black;
    opacity: 0.3;
    margin: 155px auto;
 }
.fl {
    float: right;
    display :inline-block;
    position: relative;
    width: 490px;
    height: 688px;
    background-color:transparent;
}
.fl::after {
    display: inline-block;
    content: " ";
    height: 45px;
    width: 50px;
    border-width: 3px 3px 0 0;
    border-color: white;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 10%;
    left: 250px;
}

想要的效果是这样

img
自己做出的效果却是这样

img

纯静态的也好做啊，就是布局麻烦些，那个灰色的可以是div的背景颜色。
你下面有一个div和span重名了，这些基础样式都得慢慢练习，做的慢没有关系，会越来越熟悉的，越来越上手容易的，要是现在不打下基础，走后面的路会比较难的。

这个需要借助js实现吧。这个插件分分钟搞出来。swiper.js了解一下。如果非要原生实现。得借助js纯css应该不行