apple/index.html at master · jQueryObject/apple · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>appleWatch 宣传页</title>
  <link rel="stylesheet" href="css/jquery.fullpage.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/master.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div id="fullPage">
  <!--第一屏-->
  <div class="fp-section section-one">
    <h1>它,终于来了</h1>
    <p class="text-left">
      为了充分发挥体积小巧一级佩戴于手腕的优势,AppleWatch
      带来全新的科技和互动方式。它可以让你更快速便捷的完成一些早已习惯的
      事，也可实现过去本跟无法企及的新功能。因此，这将会是焕然一新的使用体验，也
      将实现与你前所未有的贴近。
    </p>
    <a href="#">进一步了解</a>
  </div>
  <!--第二屏-->
  <div class="fp-section section-two">
    <h1>真正与你贴近的设备</h1>
    <a href="#">进一步了解</a>
  </div>
  <!--第三屏-->
  <div class="fp-section section-three">
    <h1>非同一般的精准计时</h1>
    <p>
      高级手表想来以几十精准为本，AppleWatch更是如此。他与你的iPhone配合使用，同全球标准时间的误差不超过50
      毫秒。而且，你可以对表盘进行个性画设定，以更具个性和意义的方式显示
      时间，石器更贴合你的生活和日程需要。
    </p>
    <a href="#">进一步了解计时</a>
  </div>
  <!--第四屏-->
  <div class="fp-section section-four">
    <h1>在三个特点鲜明的系列中找到你的风格</h1>
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <img src="images/primary_large_2x.jpg" class="primary">
        <h4 class="primary hidden-xs"></h4>
        <div class="intro">
          <p>不锈钢货深空黑色不锈钢表壳，蓝宝石火警镜面，搭配多宽时尚表带。</p>
          <a href="#" class="more">了解更多</a>
        </div>
      </div>
      <div class="col-xs-6 col-md-3">
        <img src="images/sport_large_2x.jpg" class="sport">
        <h4 class="sport hidden-xs"></h4>
        <div class="intro">
          <p>不锈钢货深空黑色不锈钢表壳，蓝宝石火警镜面，搭配多宽时尚表带。</p>
          <a href="#" class="more">了解更多</a>
        </div>
      </div>
      <div class="col-xs-6 col-md-3">
        <img src="images/edition_large_2x.jpg" class="edition">
        <h4 class="edition hidden-xs"></h4>
        <div class="intro">
          <p>不锈钢货深空黑色不锈钢表壳，蓝宝石火警镜面，搭配多宽时尚表带。</p>
          <a href="#" class="more">了解更多</a>
        </div>
      </div>
      <div class="col-xs-6 col-md-3">
        <img src="images/edition_large_2x.jpg" class="edition1">
        <h4 class="edition1 hidden-xs"></h4>
        <div class="intro">
          <p>不锈钢货深空黑色不锈钢表壳，蓝宝石火警镜面，搭配多宽时尚表带。</p>
          <a href="#" class="more">了解更多</a>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/scrolloverflow.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/master.js"></script>
</body>
</html>