forked from f2e-journey/treasure
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcover-fullpage.html
37 lines (37 loc) · 1.26 KB
/
cover-fullpage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>(第一屏)满屏内容页 | 即实现首屏内容高度的适配, 不管在哪种分辨率下, 首屏内容的高度刚好是一整屏的高度</title>
<style>
html,
body {
height: 100%; /* 默认撑满一个屏幕的高度 */
}
body {
margin: 0;
}
.cover {
min-height: 100%; /* 默认占据一个屏幕的高度 */
background: #cfedf0 url(http://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=25&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e) center no-repeat;
background-size: cover;
}
.section { /* 其他内容只要紧接着即可 */
background-color: #add8f7;
min-height: 500px; /* 这个高度只是为了举例的时候好看而已 */
}
</style>
</head>
<body>
<div class="cover">
我是第一屏的内容 by <a href="http://pingendo.com/" title="The simplest app for Bootstrap prototyping">Pingendo</a>
</div>
<div class="section">
我是第二屏的内容
</div>
<div class="section">
我是第三屏的内容
</div>
</body>
</html>