大作业中做到这里，banner部分图片不显示
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="6-12homwork.css" stype="text/css">
</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">
<a href="">
<div class="banner—slide slide1 banner-active"></div>
</a>
<a href="">
<div class="banner—slide slide2"></div>
</a>
<a href="">
<div class="banner—slide slide3"></div>
</a>
<a href="">
<div class="banner—slide slide4"></div>
</a>
</div><!-- 图片 -->
</div><!-- 总 -->
<script type="text/javascript" src="6-12homework.js"></script>
</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{
}
正在回答 回答被采纳积分+1
①.banner .slide1 { background-image: url(image/banner.jpg); }没有设置高度；背景图片没有高度是不显示的，因此需要设置下面这个：
.slide1,.slide2,.slide3,.slide4{
width:100%;
height:500px;
}②每一种效果实现的方式都有很多种，不只是老师讲解的一种方法，因此上面给你修改过的代码与老师讲解的不一样，学习知识要学会活学活用。
③如果你想按照老师的思路来实现，只需要添加即可，其他的不用做更改，因为背景图片没有宽度和高度是不显示的。
.slide1,.slide2,.slide3,.slide4{
width:100%;
height:500px;
}祝学习愉快！
<!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>已经对你的代码进行了调整，建议对照代码进行理解，另外，注意嵌套规则，祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星