页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="./css/style.css">

页面的body部分，在section标签里并列放入了两个div的嵌套结构，分别显示分屏两侧的不同内容，代码如下：

<section id="wrapper" class="skewed">
    <div class="layer bottom">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-front</h2>
                <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部 iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着 iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                </p>
            </div>
            <img src="img/front.png">
        </div>
    </div>
    <div class="layer top">
        <div class="content_wrapper">
            <div class="content_body">
                <h2>iphoneX-back</h2>
                <p>一直以来，我们都心存一个设想，期待着能够打造出这样一部 iPhone：它有整面的屏幕，能让你在使用时完全沉浸其中，仿佛忘记了它的存在。它是如此智能，你的一触、一碰、一言、一语，哪怕是轻轻一瞥，都会得到它心有灵犀的回应。而这个设想，终于随着 iPhone X 的到来成为了现实。现在，就跟未来见个面吧。
                </p>
            </div>
            <img src="img/back.png">
        </div>
    </div>
<div class="handle"></div>
</section>

页面的底部，需引入必要的JS文件，代码如下：

<script type="text/javascript" src="js/main.js"></script>