<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/jquery.fullpage.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--公共的元素-->
<a href="#" class="go"><img src="images/00-go.png" alt=""></a>
<a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
<!--整体容器-->
<div id="dowebok">
<!-- 每一个切换的容器-->
<!--1,指示器缺少-->
<!--2,如果是大屏幕,是基于top定位,脱离显示区域,固定在一个区域内,用一个固定大小的容器来装内容-->
<div class="section screen1">
<div class="content">
<!--商品列表,沙发,横幅-->
<div class="goods"><img src="images/01-goods.png" alt=""></div>
<div class="sofa"><img src="images/01-sofa.png" alt=""></div>
<div class="fly"><img src="images/01-fly.png" alt=""></div>
</div>
</div>
<!--第二屏,动画特点:完全进入当前屏的时候执行动画 -->
<!--1.什么时候完全进入-->
<!--2,怎么做动画 给大容器追加一个类,在这个类下面可以给需要做动画的元素添加动画属性-->
<div class="section screen2">
<div class="content">
<!--商品列表-->
<!--沙发-->
<!--输入框 搜索框 关键字-->
<div class="goods">
<img src="images/02-goods.png" alt="">
</div>
<div class="sofa">
<img src="images/02-sofa.png" alt="">
</div>
<div class="input">
<img class="search" src="images/02-search.png" alt="">
<img class="key" src="images/02-key.png" alt="">
</div>
<div class="text">
<img class="text01" src="images/02-text1.png" alt="">
<img class="text02" src="images/02-text2.png" alt="">
</div>
</div>
</div>
<!-- active 默认显示的屏幕-->
<div class="section screen3">
<div class="content">
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<div class="change">
<img src="images/03-change01.gif" alt="" >
<img src="images/03-change02.gif" alt="" >
</div>
<div class="cart">
<img src="images/03-cart01.gif" alt="">
<img src="images/03-cart02.gif" alt="">
</div>
</div>
</div>
<div class="section screen4">
<div class="content">
<!--白云-->
<div class="cloud"><img src="images/04-cloud.png" alt=""></div>
<!--文字-->
<div class="text">
<img src="images/04-text01.png" alt="">
<img src="images/04-text02.png" alt="">
</div>
<!--购物车-->
<div class="cart">
<img src="images/04-cart.png" alt="">
</div>
<!--沙发-->
<div class="sofa">
<img src="images/02-sofa.png" alt="">
</div>
<!--收货地址-->
<div class="address">
<img src="images/04-address01.png" alt="">
<img src="images/04-address02.png" alt="">
</div>
</div>
</div>
<div class="section screen5">
<div class="content">
<!-- 文字-->
<div class="text"><img src="images/05-text.png" alt=""></div>
<!--沙发-->
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<div class="card">
<img src="images/05-card.png" alt="" class="cardImg">
<img src="images/05-order.png" alt="" class="orderImg">
</div>
<!--点鼠标-->
</div>
<div class="mouse">
<img src="images/05-mouse01.png" alt="" class="m1">
<img src="images/05-mouse02.png" alt="" class="m2">
<img src="images/05-hand.png" alt="" class="hand">
</div>
</div>
<div class="section screen6">
<div class="content">
<!--白云-->
<div class="cloud">
<img src="images/06-cloud01.png" alt="">
<img src="images/06-cloud02.png" alt="">
</div>
<!--文字-->
<div class="text">
<img src="images/06-text01.png" alt="">
<img src="images/06-text02.png" alt="">
</div>
<!--盒子-->
<div class="box">
<img src="images/06-box.png" alt="">
</div>
<!--汽车-->
<div class="car">
<img src="images/06-car.png" class="carImg">
<img src="images/06-buyer.png" class="buyer">
<img src="images/06-address.png" class="address">
<img src="images/06-worker.png" class="worker">
<img src="images/06-say.png" class="say">
</div>
<!--收货人-->
<div class="person">
<img src="images/06-person.png" class="personImg">
<img src="images/06-door.png" class="doorImg">
</div>
</div>
</div>
<div class="section screen7">
<div class="content">
<div class="star">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
</div>
<div class="text">
<img src="images/07-text.png" alt="">
</div>
</div>
</div>
<div class="section screen8">
<div class="content">
<div class="btn">
<img src="images/08-btn01.png" alt="">
<img src="images/08-btn02.gif" alt="">
</div>
<div class="again"><img src="images/08-again.png" alt=""></div>
<div class="hand"><img src="images/08-hand.png" alt=""></div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.js"></script>
<script src="js/index.js"></script>
</body>
</html>