为了账号安全,请及时绑定邮箱和手机立即绑定

为什么检查代码跟老师的完全一样,每张图片的效果不是全屏呢?

效果:

http://img.imooc.com/5687e89f0001827713660565.jpg

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全屏切换效果Demo</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    #container,
    .sections,
    .section,
    {
        height: 100%;
    }
    
    #section0,
    #section1,
    #section2,
    #section3 {
        background-color: #000;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: 50% 50%;
        text-align: center;
        color: white;
    }
    
    #section0 {
        background-image: url(images/1.jpg);
    }
    
    #section1 {
        background-image: url(images/2.jpg);
    }
    
    #section2 {
        background-image: url(images/3.jpg);
    }
    
    #section3 {
        background-image: url(images/4.jpg);
    }
    </style>
</head>
<body>
    <div id="container">
        <div class="sections">
            <div class="section" id="section0">
                <h2>This is a page!</h2>
            </div>
            <div class="section" id="section1">
                <h2>This is a page!</h2>
            </div>
            <div class="section" id="section2">
                <h2>This is a page!</h2>
            </div>
            <div class="section" id="section3">
                <h2>This is a page!</h2>
            </div>
        </div>
    </div>
</body>
</html>


正在回答

5 回答

看图说明

http://img1.sycdn.imooc.com//569749140001065008930672.jpg

看图说明,你在样式那里多写了一个逗号,然后就没有然后了,这个样式没有生效。

看图说明,你在样式那里多写了一个逗号,然后就没有然后了,这个样式没有生效。

看图说明,你在样式那里多写了一个逗号,然后就没有然后了,这个样式没有生效。

(重要的事情说三遍。。。)



下图是用 chrome 看的调试信息

错误的时候 chrome 是这么的:

http://img1.sycdn.imooc.com//56974a1b0001754d17170995.jpg


正确的时候 chrome 是这么的:

http://img1.sycdn.imooc.com//56974a350001a52017051016.jpg

0 回复 有任何疑惑可以回复我~

要是背景图的话,就必须指定高度,不然就让其子元素来撑高度,要是不用背景图用<img>标签的话就可以

0 回复 有任何疑惑可以回复我~

定义了.sections,.section{height:100%;},但是html中没有引用,所以每个模块的高度是自身内容撑开的高度,不是100%。

1 回复 有任何疑惑可以回复我~

没有CLASS  要定义CLASS

0 回复 有任何疑惑可以回复我~
#1

到处玩的 提问者

不知道为什么,复制代码的时候没复制到。写的代码是有的。
2016-01-05 回复 有任何疑惑可以回复我~

你的session和sessions在哪(⊙o⊙)…

0 回复 有任何疑惑可以回复我~
#1

到处玩的 提问者

不知道为什么,复制代码的时候没复制到。写的代码是有的,刚更新了下代码。效果还是没变。
2016-01-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么检查代码跟老师的完全一样,每张图片的效果不是全屏呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信