<!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>
一个基于html5和css的宣传页面(不支持IE低版本).zip （70个子文件） 
PublicityPage-master js 
jquery.fullpage.js 107KB index.js 3KB jquery.min.js 93KB .idea PublicityPage.iml 458B vcs.xml 180B workspace.xml 22KB inspectionProfiles Project_Default.xml 173B modules.xml 278B css jquery.fullpage.css 5KB index.css 12KB
index.html 7KB images 
04-sofa.png 65KB 02-key.png 4KB 08-again.png 2KB 03-bg.png 16KB 04-text02.png 4KB 06-car.png 3KB 05-hand.png 3KB 04-cart.png 6KB 07-bg.png 152KB 05-card.png 5KB 06-bg.png 39KB 07-star.png 238B 06-door.png 797B 04-address01.png 2KB 06-worker.png 14KB 06-text02.png 8KB
03-cart02.gif 667B 06-buyer.png 7KB 06-address.png 5KB 02-text2.png 3KB 02-text1.png 7KB 06-cloud01.png 1KB 01-bg.png 28KB 05-text.png 8KB 06-box.png 604B 02-search.png 487B 04-text01.png 5KB 05-mouse01.png 7KB 02-text.png 3KB 04-address02.png 5KB 08-hand.png 3KB 06-person.png 3KB 05-order.png 2KB 06-text01.png 4KB 03-cart01.gif 668B 01-sofa.png 18KB 02-sofa.png 56KB 00-point02.png 209B 01-goods.png 22KB 05-mouse02.png 7KB 04-bg.png 20KB 02-goods.png 84KB 01-fly.png 10KB 07-text.png 1KB 08-bg.png 11KB 03-change02.gif 4KB 00-more.png 3KB 05-bg.png 162KB 08-btn01.png 4KB 08-btn02.gif 12KB 02-text02.png 7KB 06-cloud02.png 1KB 05-mouse.png 7KB 03-change01.gif 3KB 04-cloud.png 3KB 06-say.png 5KB 00-go.png 5KB 02-bg.png 17KB 00-point01.png 204B资源评论
博士僧小星
- 粉丝: 2261
- 资源: 5991
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
