index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>index</title>
  6. <link rel="stylesheet" type="text/css" href="./css/index.css">
  7. <link rel="stylesheet" type="text/css" href="./css/fonts.css">
  8. <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="header">
  12. <div class="logo">5</div>
  13. <div class="nav">
  14. <a href="/html/down.html" class="download"><i class="down"></i>APP下载</a>
  15. <ul class="nav_list clearfix">
  16. <li><a href="##">首页</a></li>
  17. <li><a href="##">最新活动</a></li>
  18. <li><a href="##">我们的理念</a></li>
  19. </ul>
  20. </div>
  21. </div>
  22. <div class="banner">
  23. <div class="banner_box">
  24. <div class="flexslider pc_banner">
  25. <ul class="slides">
  26. <li data-thumb="images/banner.png">
  27. <img src="images/banner.png" class="banner_img">
  28. </li>
  29. <li data-thumb="images/banner.png">
  30. <img src="images/banner.png" class="banner_img">
  31. </li>
  32. <li data-thumb="images/banner.png">
  33. <img src="images/banner.png" class="banner_img">
  34. </li>
  35. </ul>
  36. </div>
  37. <div class="href_box">
  38. <div class="pengci_icon">2</div>
  39. <div class="pengci_tit"><b>高效的</b>英语学习神器</div>
  40. <div class="pengci_intro">烦恼于没有合适时间和地点学英语?</div>
  41. <a href="" class="pengci_icon_z">查看详情</a>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="list_box">
  46. <div class="list_logo"></div>
  47. <span class="list_tit">最新<b>活动</b></span>
  48. <em class="list_intro">碰词儿-全能的单词记忆助手</em>
  49. <div class="slider_box">
  50. <div class="slider_overflow">
  51. <ul class="slider_ul clearfix">
  52. <li>
  53. <div class="slider_img_box"><img src="./images/tit_1.png" width="406" height="309"></div>
  54. <div class="slider_txt">
  55. <p>平田的单词世界</p>
  56. <span>碰词儿&天下贰联合出品</span>
  57. </div>
  58. </li>
  59. <li>
  60. <div class="slider_img_box"><img src="./images/tit_2.png" width="406" height="309"></div>
  61. <div class="slider_txt">
  62. <p>单词大灌篮</p>
  63. <span>沈阳先璞后玉科技有限公司</span>
  64. </div>
  65. </li>
  66. <li>
  67. <div class="slider_img_box"><img src="./images/tit_3.png" width="406" height="309"></div>
  68. <div class="slider_txt">
  69. <p>小叮当的单词饼干</p>
  70. <span>碰词儿出品</span>
  71. </div>
  72. </li>
  73. <li>
  74. <div class="slider_img_box"><img src="./images/tit_1.png" width="406" height="309"></div>
  75. <div class="slider_txt">
  76. <p>平田的单词世界</p>
  77. <span>碰词儿&天下贰联合出品</span>
  78. </div>
  79. </li>
  80. <li>
  81. <div class="slider_img_box"><img src="./images/tit_2.png" width="406" height="309"></div>
  82. <div class="slider_txt">
  83. <p>平田的单词世界</p>
  84. <span>碰词儿&天下贰联合出品</span>
  85. </div>
  86. </li>
  87. <li>
  88. <div class="slider_img_box"><img src="./images/tit_3.png" width="406" height="309"></div>
  89. <div class="slider_txt">
  90. <p>平田的单词世界</p>
  91. <span>碰词儿&天下贰联合出品</span>
  92. </div>
  93. </li>
  94. </ul>
  95. </div>
  96. <a href="javascript:;" class="slider_pre"></a>
  97. <a href="javascript:;" class="slider_next"></a>
  98. </div>
  99. </div>
  100. <div class="list_bg"></div>
  101. <div class="list_box">
  102. <div class="list_logo list_icon"></div>
  103. <span class="list_tit">我们的<b>的理念</b></span>
  104. <em class="list_intro list_pattern">强烈的需求+实用的工具=高效的学习</em>
  105. <p class="pattern_p">碰词儿是一款力求适用于每一个英语学习者的词汇记忆助手。<br /> 界面简洁,功能实用,用户在海量分类的单词集中挑选自己需要的或感兴趣的后还能为自己量身打造最舒服的记忆环境。<br /> 互动和反馈在学习中当然也是必不可少,好友,动态,分享,对战,碰词儿从各个方面提升用户学习英语,记忆词汇的乐趣和效率。</p>
  106. <div class="pattern_box">
  107. <span class="pattern_tit"><em>3</em>大模式帮你有效记单词</span>
  108. <ul class="clearfix">
  109. <li>
  110. <div class="pattern_txt"><img src="./images/pattern1.png" width="102" height="102"></div>
  111. <p>单词对战帮你在娱<br> 乐和竞技中成长</p>
  112. </li>
  113. <li>
  114. <div class="pattern_txt"><img src="./images/pattern2.png" width="102" height="102"></div>
  115. <p>单词广场为你提供<br>一个丰富的单词,<br>经验的分享</p>
  116. </li>
  117. <li>
  118. <div class="pattern_txt"><img src="./images/pattern3.png" width="102" height="102"></div>
  119. <p>好友互助让你学习<br>不再孤独</p>
  120. </li>
  121. </ul>
  122. </div>
  123. </div>
  124. <div class="fotter">
  125. 沈ICP备13071670-2号<br>Copyright © 2017- 2018 沈阳先璞后玉科技有限公司
  126. </div>
  127. <script type="text/javascript" src="./js/jquery.flexslider-min.js"></script>
  128. <script type="text/javascript">
  129. $(function(){
  130. $(".flexslider").flexslider({
  131. slideshowSpeed: 3500, //展示时间间隔ms
  132. animationSpeed: 400, //滚动时间ms
  133. touch: true, //是否支持触屏滑动
  134. slideDirection: "horizontal",
  135. directionNav: true,
  136. pauseOnHover: true
  137. });
  138. })
  139. </script>
  140. <script type="text/javascript" src="./js/jquery.superslide.2.1.1.js"></script>
  141. <script>
  142. $(".slider_box").slide({
  143. titCell:"",
  144. mainCell:".slider_ul",
  145. autoPage:true,
  146. effect:"leftLoop",
  147. autoPlay:true,
  148. vis:3,
  149. prevCell:".slider_pre",
  150. nextCell:".slider_next"
  151. });
  152. </script>
  153. </body>
  154. </html>