为什么检查代码跟老师的完全一样，每张图片的效果不是全屏呢？
来源：1-2 全屏滑动插件的CSS和HTML结构
到处玩的
2016-01-02 23:12
效果：
代码：
<!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回答
-
- 炸猪排超人
- 2016-01-14 15:12:21
看图说明
看图说明，你在样式那里多写了一个逗号，然后就没有然后了，这个样式没有生效。
看图说明，你在样式那里多写了一个逗号，然后就没有然后了，这个样式没有生效。
看图说明，你在样式那里多写了一个逗号，然后就没有然后了，这个样式没有生效。
（重要的事情说三遍。。。）
下图是用 chrome 看的调试信息
错误的时候 chrome 是这么的：
正确的时候 chrome 是这么的：
-
- 二十四节花信风
- 2016-01-05 10:39:47
要是背景图的话，就必须指定高度，不然就让其子元素来撑高度，要是不用背景图用<img>标签的话就可以
-
- aaallj
- 2016-01-03 11:53:50
定义了.sections,.section{height:100%;},但是html中没有引用，所以每个模块的高度是自身内容撑开的高度，不是100%。
-
- 一碗稀饭
- 2016-01-03 10:58:34
没有CLASS 要定义CLASS
-
- 迷途的马尔斯
- 2016-01-03 04:04:54
你的session和sessions在哪(⊙o⊙)…
全屏切换效果
如何在PC和移动端实现全屏切换效果，本课程会给你答案
85463 学习 · 154 问题
相似问题