大作业中做到这里，banner部分图片不显示

HTML部分

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</ul>

</div>

</a>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

CSS部分

padding:0px;

margin:0px;

}

/*main设置*/

.main{

width:1200px;

height:462px;

margin:0 auto;

margin-top:30px;

overflow: hidden;

/*position:relative;*/

border:1px red solid;

}

/*nav区域*/

.nav{

height:76px;

width:1200px;

background-color: #FFF;

/*border:1px red solid;*/

}

.nav_list{

list-style: none;

height:76px;

widows:100%;

/*border:1px blue solid;*/

}

.nav_list li{

/*border:1px red solid;*/

text-align: center;

padding-top:22px;

height: 56px;

width: 25%;

float:left;

font-family:" Microsoft YaHei";

font-weight: bold;

font-size: 22px;

color: #666 ;

/*background-color: #FFCC00;*/

/*border:1px gray solid;*/

border-radius:3%;

}

/*banner区域*/

.banner,

.banner .banner-slide{

height:406px;

width: 1200px;

}

.banner{

position:relative;

overflow:hidden;

}

.banner .banner-slide{

background-repeat:no-repeat;

overflow:hidden;

/*float:left;*/

position:absolute;

display:none;

}

.banner .banner-active{

display: block;

/*border:4px #666 solid;*/

/*background-color: red;*/

}

.banner .slide1{

background-image:url(imges/1.jpg);

}

.banner .slide2{

background-image:url(imges/2.jpg);

}

.banner .slide3{

background-image:url(imges/3.jpg);

}

.banner .slide4{

background-image:url(imges/4.jpg);

}

.banner a{

}

坏女孩5 2017-08-21

源自：项目：JS实现轮播特效 6-1 案例总结

收起

2回答

樱桃小胖子 2017-08-21 16:44:00

①.banner .slide1 { background-image: url(image/banner.jpg); }没有设置高度；背景图片没有高度是不显示的，因此需要设置下面这个：

.slide1,.slide2,.slide3,.slide4{
        width:100%;
        height:500px;
}

②每一种效果实现的方式都有很多种，不只是老师讲解的一种方法，因此上面给你修改过的代码与老师讲解的不一样，学习知识要学会活学活用。

③如果你想按照老师的思路来实现，只需要添加即可，其他的不用做更改，因为背景图片没有宽度和高度是不显示的。

.slide1,.slide2,.slide3,.slide4{
        width:100%;
        height:500px;
}

祝学习愉快！

收起回答

提问者坏女孩5 #1

在上面 .banner, .banner .banner-slide{ } 的部分已经同时设置了高度了呢？为什么和.slide1...设置的宽高效果不一样嘛？

2017-08-21 18:43:09
樱桃小胖子回复提问者坏女孩5 #2

.banner, .banner .banner-slide{ }设置的是盒子的宽度和高度，而background-image:url(imges/1.jpg);继承不到盒子的宽度和高度，因此需要设置background-image:url(imges/1.jpg);自己的宽度和高度，祝学习愉快！

2017-08-21 18:56:25

樱桃小胖子 2017-08-21 11:51:33

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
    }
    /*main设置*/
    .main {
        width: 1200px;
        height: 462px;
        margin: 0 auto;
        margin-top: 30px;
        overflow: hidden;
        border: 1px red solid;
    }
    /*nav区域*/
    .nav {
        height: 76px;
        width: 1200px;
        background-color: red;
    }
    .nav_list {
        list-style: none;
        height: 76px;
        width:100%;
    }
    .nav_list li {
        text-align: center;
        padding-top: 22px;
        height: 56px;
        width: 25%;
        float: left;
        font-family: " Microsoft YaHei";
        font-weight: bold;
        font-size: 22px;
        color: #666;
        border-radius: 3%;
    }
    /*banner区域*/
    .banner{
        height: 406px;
        width: 1200px;
        overflow:hidden;
    }
 
    .banner .banner-active {
        display: block;
    }
    .slide1,.slide2,.slide3,.slide4{
        width:100%;
        height:500px;
    }
    .banner .slide1 {
        background-image: url(image/banner.jpg);
    }
    .banner .slide2 {
        background-image: url(image/banner.jpg);
    }
    .banner .slide3 {
        background-image: url(image/banner.jpg);
    }
    .banner .slide4 {
        background-image: url(image/banner.jpg);
    }
    </style>
</head>
 
<body>
    <!-- 总 -->
    <div class="main">
        <!-- 导航 -->
        <div class="nav">
            <ul class="nav_list">
                <li>首页</li>
                <li>点击看看</li>
                <li>会自动的</li>
                <li>我的网站</li>
            </ul>
        </div>
        <!-- 导航 -->
        <!-- 图片 -->
        <div class="banner">
            <div class="banner—slide slide1 banner-active"></div>
            <div class="banner—slide slide2"></div>
            <div class="banner—slide slide3"></div>
            <div class="banner—slide slide4"></div>
        </div>
        <!-- 图片 -->
    </div>
    <!-- 总 -->
    <script type="text/javascript" src="6-12homework.js"></script>
</body>
 
</html>

已经对你的代码进行了调整，建议对照代码进行理解，另外，注意嵌套规则，祝学习愉快！

收起回答

提问者坏女孩5 #1

您好，老师，如果按照这样的话。所有图片在div内，没有设置为absolute，所有图片应该是往下排列的，只是因为banner里面设置了hidden才显示了一张，这个跟大作业里要求的要显示隐藏的效果是不是不太符合？。另外想问下下我的代码里面的嵌套错误出现在哪里？我这样做是按照最后视频里面的案例做的，为什么不显示图片呢？

2017-08-21 15:56:52