6-2题老师帮我看下我的图片为什么出不来啊

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;

}









正在回答

登陆购买课程后可参与讨论,去登陆

2回答

可以在控制台中看一下:

http://img1.sycdn.imooc.com//climg/5b38a09800019e6f04900280.jpg

虽然设置了slide-active是显示的,但是因为权重不够,没有生效,可以这样修改,参考:

http://img1.sycdn.imooc.com//climg/5b38a0e600014aea05370123.jpg

自己完善下,祝学习愉快~~

  • aprilbei 提问者 #1
    非常感谢!
    2018-07-01 18:07:00
好帮手慕星星 2018-07-01 17:14:42

首先要看图片的路径相对于css样式文件是否是正确的,还有你给banner-slide设置了隐藏,所以就看不到了。

http://img1.sycdn.imooc.com//climg/5b389b5a0001762205770352.jpg

自己修改测试下,祝学习愉快~~

  • 提问者 aprilbei #1
    我是给每个设置为none,但给第一张图片设置了.slide-active{ display:block; }后 还是看不见,图片路径正确
    2018-07-01 17:17:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师