6-2题老师帮我看下我的图片为什么出不来啊
html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main" id="main">
<!--标题选项卡-->
<div class="nav">
<div class="title">首页</div>
<div class="title">点击看看</div>
<div class="title">会自动的</div>
<div class="title">我的网站</div>
</div>
<!--banner图-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-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 src="js/1.js"></script>
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei";
color: gray;
}
.main{
width:1000px;
height:520px;
margin: 0 auto;
}
.main .nav{
width: 1000px;
height: 60px;
font-size: 0px;
}
.main .nav .title{
display: inline-block;
width: 25%;
height: 60px;
font-size: 22px;
line-height: 60px;
text-align: center;
}
.selected{
background: orange;
border-radius: 5px;
}
.main .banner{
width: 1000px;
height: 480px;
overflow: hidden;
}
.main .banner .banner-slide{
width: 1000px;
height: 480px;
background-repeat: no-repeat;
float: left;
display: none;
}
.slide1{
background-image: url(../img/1.jpg);
}
.slide2{
background-image: url(../img/3.jpg);
}
.slide3{
background-image: url(../img/4.jpg);
}
.slide4{
background-image: url(../img/5.jpg);
}
.slide-active{
display:block;
}
正在回答
可以在控制台中看一下:
虽然设置了slide-active是显示的,但是因为权重不够,没有生效,可以这样修改,参考:
自己完善下,祝学习愉快~~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星