index.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首页</title>
  6. <link rel="stylesheet" type="text/css" href="./css/index.css">
  7. <link rel="stylesheet" type="text/css" href="./css/fonts.css">
  8. <link rel="stylesheet" type="text/css" href="http://www.pengcieredu.com/src/css/indexconent.css?2018">
  9. <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
  10. <!--
  11. <script type="text/javascript" src="../js/libs/require.js"></script>
  12. <script type="text/javascript" src="../js/config.js"></script> -->
  13. </head>
  14. <style type="text/css">
  15. .slider_txt p{padding-bottom:20px;}
  16. </style>
  17. <body style="overflow-x:hidden;">
  18. <!-- <div class="header">
  19. <div class="logo">5</div>
  20. <div class="nav">
  21. <a href="/html/down.html" class="download"><i class="down"></i>APP下载</a>
  22. <ul class="nav_list clearfix">
  23. <li><a href="http://www.pengcieredu.com/">首页</a></li>
  24. <li><a href="##">单词广场</a></li>
  25. <li><a href="##">联系我们</a></li>
  26. </ul>
  27. </div>
  28. </div> -->
  29. <div class="header clearfix" style="background:none;z-index: 999;padding:0;">
  30. <div class="head_logo"></div>
  31. <div class="nav_login" style="padding-right:125px;">
  32. <div class="sign_end" style="display:none">
  33. <a href="#" class="sign_pic">
  34. <!-- <img class="indexIconImg" src="" width="24" height="24"> -->
  35. </a>
  36. <div class="curriculum">
  37. <a href="javascript:;" class="my_kechen">我的课程</a>
  38. <a href="javascript:;" class="sign1">我的自由记</a>
  39. <a href="javascript:;" class="sign2">退出登录</a>
  40. <em class="jiao"></em>
  41. </div>
  42. </div>
  43. <div class="login" style="display:none">
  44. <span class="login_btn">登录</span>
  45. <span class="zhuce_btn">注册</span>
  46. </div>
  47. <div class="download clearfix">
  48. <span class="down_icon"></span>
  49. <em class="down_txt" style="display:none">你是会员吗?</em>
  50. </div>
  51. <style type="text/css">
  52. .nav li a:hover{color:#333;}
  53. </style>
  54. <div class="nav">
  55. <ul class="clearfix">
  56. <li class="nav_cur"><a href="http://www.pengcieredu.com/">首页</a></li>
  57. <li><a href="http://www.pengcieredu.com/src/word/">单词广场</a></li>
  58. <li><a href="javascript:;">联系我们</a></li>
  59. </ul>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="banner">
  64. <div class="banner_box">
  65. <div class="flexslider pc_banner">
  66. <ul class="slides">
  67. <li data-thumb="images/banner.png">
  68. <img src="images/banner.png" class="banner_img">
  69. </li>
  70. <li data-thumb="images/banner.png">
  71. <img src="images/banner.png" class="banner_img">
  72. </li>
  73. <li data-thumb="images/banner.png">
  74. <img src="images/banner.png" class="banner_img">
  75. </li>
  76. </ul>
  77. </div>
  78. <div class="href_box">
  79. <div class="pengci_icon">2</div>
  80. <div class="pengci_tit"><b>高效的</b>英语学习神器</div>
  81. <div class="pengci_intro">烦恼于没有合适时间和地点学英语?</div>
  82. <span class="pengci_icon_z" style="cursor: pointer;">查看详情</span>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="list_box">
  87. <div class="list_logo"></div>
  88. <span class="list_tit">最新<b>活动</b></span>
  89. <em class="list_intro">碰词儿-全能的单词记忆助手</em>
  90. <div class="slider_box">
  91. <div class="slider_overflow">
  92. <ul class="slider_ul clearfix">
  93. <li>
  94. <div class="slider_img_box"><img src="./images/tit_11.jpg" width="406" height="309"></div>
  95. <div class="slider_txt">
  96. <p>私人订制</p>
  97. <!-- <span>碰词儿&天下贰联合出品</span> -->
  98. </div>
  99. </li>
  100. <li>
  101. <div class="slider_img_box"><img src="./images/tit_22.jpg" width="406" height="309"></div>
  102. <div class="slider_txt">
  103. <p>一个人的出版社</p>
  104. <!-- <span>碰词儿&天下贰联合出品</span> -->
  105. </div>
  106. </li>
  107. <li>
  108. <div class="slider_img_box"><img src="./images/tit_33.jpg" width="406" height="309"></div>
  109. <div class="slider_txt">
  110. <p>加入我们</p>
  111. <!-- <span>碰词儿&天下贰联合出品</span> -->
  112. </div>
  113. </li>
  114. <li>
  115. <div class="slider_img_box"><img src="./images/tit_11.jpg" width="406" height="309"></div>
  116. <div class="slider_txt">
  117. <p>私人订制</p>
  118. <!-- <span>碰词儿&天下贰联合出品</span> -->
  119. </div>
  120. </li>
  121. <li>
  122. <div class="slider_img_box"><img src="./images/tit_22.jpg" width="406" height="309"></div>
  123. <div class="slider_txt">
  124. <p>一个人的出版社</p>
  125. <!-- <span>碰词儿&天下贰联合出品</span> -->
  126. </div>
  127. </li>
  128. <li>
  129. <div class="slider_img_box"><img src="./images/tit_33.jpg" width="406" height="309"></div>
  130. <div class="slider_txt">
  131. <p>加入我们</p>
  132. <!-- <span>碰词儿&天下贰联合出品</span> -->
  133. </div>
  134. </li>
  135. </ul>
  136. </div>
  137. <a href="javascript:;" class="slider_pre"></a>
  138. <a href="javascript:;" class="slider_next"></a>
  139. </div>
  140. </div>
  141. <div class="list_bg"></div>
  142. <div class="list_box">
  143. <div class="list_logo list_icon"></div>
  144. <span class="list_tit">我们的<b>的理念</b></span>
  145. <em class="list_intro list_pattern">强烈的需求+实用的工具=高效的学习</em>
  146. <p class="pattern_p">碰词儿是一款力求适用于每一个英语学习者的词汇记忆助手。<br /> 界面简洁,功能实用,用户在海量分类的单词集中挑选自己需要的或感兴趣的后还能为自己量身打造最舒服的记忆环境。<br /> 互动和反馈在学习中当然也是必不可少,好友,动态,分享,对战,碰词儿从各个方面提升用户学习英语,记忆词汇的乐趣和效率。</p>
  147. <div class="pattern_box">
  148. <span class="pattern_tit"><em>3</em>大模式帮你有效记单词</span>
  149. <ul class="clearfix">
  150. <li>
  151. <div class="pattern_txt"><img src="./images/pattern1.png" width="102" height="102"></div>
  152. <p>单词对战帮你在娱<br> 乐和竞技中成长</p>
  153. </li>
  154. <li>
  155. <div class="pattern_txt"><img src="./images/pattern2.png" width="102" height="102"></div>
  156. <p>单词广场为你提供<br>一个丰富的单词,<br>经验的分享</p>
  157. </li>
  158. <li>
  159. <div class="pattern_txt"><img src="./images/pattern3.png" width="102" height="102"></div>
  160. <p>好友互助让你学习<br>不再孤独</p>
  161. </li>
  162. </ul>
  163. </div>
  164. </div>
  165. <style type="text/css">
  166. .index_pop{width:400px;height:510px;padding:10px; position: fixed;left:50%;top:50%;margin:-200px 0 0 -255px; z-index: 99999999;background:#fff;}
  167. .index_pop span{display:block;font:14px/30px "Microsoft Yahei";color:#444;}
  168. .video_box{width:654px;height:368px;position: fixed;left:50%;top:50%;margin:-184px 0 0 -327px;z-index: 99999999;}
  169. .close_video{display: block;width:17px;height:17px; position: absolute;right:-9px;top:-9px;background:url(./images/btn_close.png) no-repeat left top;z-index: 999999999; cursor: pointer;}
  170. </style>
  171. <div class="index_pop" style="display:none">
  172. <span style="text-align: center; font-size: 24px;padding-bottom: 10px;">联系我们</span>
  173. <img src="./images/er_ma.jpg" width="400" alt="">
  174. <span style="padding-top: 6px;">电话:13674185576</span>
  175. <span>邮箱:philosopher@163.com</span>
  176. <span>地址:沈阳市和平区长白五街268号</span>
  177. </div>
  178. <div class="back" style="display: block;z-index: 99999998;display: none"></div>
  179. <div class="video_box" style="display:none;">
  180. <span class="close_video"></span>
  181. <video data-src="http://www.pengcieredu.com/images/video.mp4" src="" controls="controls" autoplay="autoplay">
  182. 您的浏览器不支持 video 标签。
  183. </video>
  184. </div>
  185. <div class="fotter">
  186. 沈ICP备13071670-2号<br>Copyright © 2017- 2018 沈阳先璞后玉科技有限公司
  187. </div>
  188. <script type="text/javascript" src="./js/jquery.flexslider-min.js"></script>
  189. <script type="text/javascript">
  190. $(function(){
  191. $('.nav li').eq(2).click(function(e){
  192. e.stopPropagation()
  193. $('.index_pop').show();
  194. })
  195. $(document).click(function(){
  196. $('.index_pop').hide();
  197. })
  198. $('.index_pop').click(function(e){
  199. e.stopPropagation()
  200. })
  201. $('.down_icon').click(function(){
  202. window.location.href = 'http://www.pengcieredu.com/down.html'
  203. })
  204. $('.pengci_icon_z').click(function(){
  205. var data_src=$('.video_box').find('video').attr('data-src')
  206. console.log(data_src)
  207. $('.back').show();
  208. $('.video_box').show().find('video').prop({'src':data_src})
  209. //$('.video_box').show().find('video').prop({'src':data_src})
  210. })
  211. $('.close_video').click(function(){
  212. $('.back').hide();
  213. $('.video_box').hide().find('video').attr({'src':''})
  214. })
  215. $(".flexslider").flexslider({
  216. slideshowSpeed: 3500, //展示时间间隔ms
  217. animationSpeed: 400, //滚动时间ms
  218. touch: true, //是否支持触屏滑动
  219. slideDirection: "horizontal",
  220. directionNav: true,
  221. pauseOnHover: true
  222. });
  223. })
  224. </script>
  225. <script type="text/javascript" src="./js/jquery.superslide.2.1.1.js"></script>
  226. <script>
  227. $(".slider_box").slide({
  228. titCell:"",
  229. mainCell:".slider_ul",
  230. autoPage:true,
  231. effect:"leftLoop",
  232. autoPlay:true,
  233. vis:3,
  234. prevCell:".slider_pre",
  235. nextCell:".slider_next"
  236. });
  237. </script>
  238. </body>
  239. </html>