专区文章页.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <!doctype html>
  2. <html >
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="Keywords" content="多玩游戏">
  8. <meta name="description" content="">
  9. <title> 一线专区模板 </title>
  10. <link href="css/global.css" rel="stylesheet">
  11. <script src="http://assets.dwstatic.com/common/js/jquery.js"></script>
  12. <script src="http://assets.dwstatic.com/b=lego/2.0.0/js&f=lego.switchable.js"></script>
  13. </head>
  14. <body>
  15. <!-- 专区{ -->
  16. <div class="ZQ" id="ZQ">
  17. <% include tpl/partial/duowan-nav %>
  18. <!-- 专区导航{ -->
  19. <% include tpl/partial/zq-head %>
  20. <!-- }专区导航 -->
  21. <!-- 专区内容{ -->
  22. <div class="ZQ__body">
  23. <div class="ZQ-row">
  24. <!-- 文章页{ -->
  25. <div class="ZQ-71-51">
  26. <div class="ZQ-page ZQ-page--article">
  27. <!-- 面包屑导航{ -->
  28. <div class="mod-crumbs">
  29. <a class="back-to-index" href="#"><i></i>多玩首页</a><span class="arrow">»</span><a href="/">某专区</a><span class="arrow">»</span><b>某文章标题</b>
  30. </div>
  31. <!-- }面包屑导航 -->
  32. <h1>根本停不下来 疾风之刃魔影师超理想连招</h1>
  33. <address>
  34. [<span> 2014-11-12 11:27:29 </span><span class="comment"><a href="#comment_top" id="first_comment_url" target="_self">网友评论<span id="first_comment_count">3</span>条</a></span> <span>来源:优酷</span> <span>作者:彭哥列第十代</span> <span><a href="http://bbs.duowan.com/forum-1624-1.html">进入论坛</a></span>]
  35. </address>
  36. <blockquote class="summary">
  37. <span class="label">小编前言</span>
  38. <p>哈喽小伙伴们,新的一期手游抢鲜看和大家见面啦!本期节目同样是猛料多多哟!EA出品经典模拟城市登陆手机双平台,吼吼!我是要成为市长的男人~</p>
  39. </blockquote>
  40. <% include tpl/partial/article %>
  41. <div id="share-links">
  42. <!-- 社交站分享{ -->
  43. <!-- 百度分享{ -->
  44. <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1415939419529">
  45. <span>分享到:</span>
  46. <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  47. <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  48. <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  49. <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
  50. <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
  51. <a href="#" class="bds_more" data-cmd="more"></a>
  52. </div>
  53. <script>
  54. window._bd_share_config = {
  55. "common": {
  56. "bdSnsKey": {
  57. "tsina": "4079905110",
  58. "tqq": "42d33144240e4386a43ee39629560564"
  59. },
  60. "bdText": "",
  61. "bdMini": "2",
  62. "bdMiniList": false,
  63. "bdPic": "",
  64. "bdStyle": "0",
  65. "bdSize": "16"
  66. },
  67. "share": {}
  68. };
  69. with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
  70. </script>
  71. <style>
  72. .bdsharebuttonbox {
  73. float: right !important;
  74. _display: inline;
  75. padding-right: 10px;
  76. height: 20px;
  77. line-height: 20px;
  78. overflow: hidden;
  79. }
  80. .bdsharebuttonbox a {
  81. position: relative;
  82. top: -4px;
  83. }
  84. .bdsharebuttonbox span {
  85. float: left;
  86. _display: inline;
  87. }
  88. </style>
  89. </div>
  90. </div>
  91. <div class="ZQ-gap"></div>
  92. <!-- 新闻{ -->
  93. <div class="ZQ-box ZQ-gameread">
  94. <div class="box-hd">
  95. <h3 class="title">相关新闻</h3>
  96. <div class="act">
  97. <a class="more" href="#"><i></i>更多</a>
  98. </div>
  99. </div>
  100. <div class="box-bd">
  101. <ul class="m-list">
  102. <li><i></i><span class="date">01.02</span><a href="#" title="">韩国玩家星际争霸高达作品死神来了</a></li>
  103. <li><i></i><span class="date">11.20</span><a href="#" title="">转虫族给力啊 星际猪出品趣味星际2漫画</a></li>
  104. <li><i></i><span class="date">11.17</span><a href="#" title="">首位GSL美女选手参赛照片 震撼护士装</a></li>
  105. <li><i></i><span class="date">11.14</span><a href="#" title="">韩国GSL第三季1500人预选赛首日现场图赏</a></li>
  106. <li><i></i><span class="date">11.13</span><a href="#" title="">国内画师leon19星际争霸2美术作品欣赏</a></li>
  107. <li><i></i><span class="date">11.13</span><a href="#" title="">国内画师leon19星际争霸2美术作品欣赏</a></li>
  108. </ul>
  109. </div>
  110. </div>
  111. <!-- }新闻 -->
  112. <div class="ZQ-gap"></div>
  113. <!-- 图集推荐 start -->
  114. <style>
  115. #specialTab {
  116. height:201px;
  117. zoom:1;
  118. position:relative;
  119. padding:12px 16px;
  120. border:1px solid #EFEFEF;
  121. font-size:14px;
  122. background-color:#FFF
  123. }
  124. #specialTab .fr {
  125. float:right;
  126. _display:inline
  127. }
  128. #specialTab .box-hd {
  129. border-bottom:1px solid #EAEAEA
  130. }
  131. #specialTab .box-hd h3.title {
  132. float:left;
  133. margin:0 10px 0 0;
  134. font-size:16px;
  135. height:34px;
  136. line-height:34px;
  137. position:relative;
  138. margin-bottom:-1px;
  139. border-bottom:0;
  140. width:100%
  141. }
  142. #specialTab .box-hd h3.title span {
  143. cursor:default;
  144. margin-right:15px
  145. }
  146. #specialTab .box-hd h3.title span a.fr {
  147. display:none;
  148. font-size:14px;
  149. font-weight:normal
  150. }
  151. #specialTab .box-hd h3.title span.current-nav {
  152. border-bottom:2px solid #00a786;
  153. padding-bottom:6px
  154. }
  155. #specialTab .box-hd h3.title span.current-nav a {
  156. display:inline-block
  157. }
  158. #specialTab .box-bd {
  159. padding-top:20px
  160. }
  161. #specialTab li {
  162. position:relative;
  163. float:left;
  164. overflow:visible;
  165. width:144px
  166. }
  167. #specialTab li a {
  168. zoom:1;
  169. display:block;
  170. text-align:center;
  171. position:relative
  172. }
  173. #specialTab li img {
  174. width:144px;
  175. height:110px
  176. }
  177. #specialTab li em {
  178. line-height:22px;
  179. height:22px;
  180. overflow:hidden;
  181. font-size: 14px;
  182. }
  183. #specialTab li .m-list__mask {
  184. position:absolute;
  185. left:-2px;
  186. top:-2px;
  187. width:144px;
  188. height:110px;
  189. border:2px solid #00a786;
  190. display:none
  191. }
  192. #specialTab .mod-pic {
  193. display:none;
  194. margin-right:-20px;
  195. letter-spacing:-0.34em
  196. }
  197. #specialTab .mod-pic li {
  198. display:inline-block;
  199. zoom:1;
  200. vertical-align:top;
  201. letter-spacing:normal;
  202. word-spacing:normal;
  203. margin:0 15px 0 0
  204. }
  205. #specialTab .current {
  206. display:block
  207. }
  208. #specialTab .huyaVideoList img, #specialTab .huyaVideoList .m-list__mask {
  209. height:81px !important
  210. }
  211. #specialTab .huyaVideoList li em {
  212. height:32px;
  213. line-height:16px
  214. }
  215. </style>
  216. <div class="ZQ-box article__picRec" id="specialTab">
  217. <div class="box-hd">
  218. <h3 class="title">
  219. <span>图集推荐<a href="http://www.duowan.com/?jiongtu#album-tab" class="fr">更多</a></span>
  220. <span>视频推荐<a href="http://v.huya.com/yule/" class="fr">更多</a></span>
  221. </h3>
  222. </div>
  223. <div class="box-bd">
  224. <ul class="mod-pic">
  225. <li><a href=""><img src="http://art.yypm.com/144x110" alt=""><em>恩格斯被马克思戴绿帽</em><span class="m-list__mask"></span></a></li>
  226. <li><a href=""><img src="http://art.yypm.com/144x110" alt=""><em>恩格斯被马克思戴绿帽</em><span class="m-list__mask"></span></a></li>
  227. <li><a href=""><img src="http://art.yypm.com/144x110" alt=""><em>恩格斯被马克思戴绿帽</em><span class="m-list__mask"></span></a></li>
  228. <li><a href=""><img src="http://art.yypm.com/144x110" alt=""><em>恩格斯被马克思戴绿帽</em><span class="m-list__mask"></span></a></li>
  229. <li><a href=""><img src="http://art.yypm.com/144x110" alt=""><em>恩格斯被马克思戴绿帽</em><span class="m-list__mask"></span></a></li>
  230. </ul>
  231. <ul class="mod-pic huyaVideoList">
  232. <li>
  233. <a href="http://v.huya.com/play/1639581.html?lol"><img src="http://img4.dwstatic.com/kan/1604/323953854530/1459998878233.jpg" alt="【福利】10大YouTube最火辣美女"><em>【福利】10大YouTube最火辣美女 </em><span class="m-list__mask"></span></a>
  234. </li>
  235. <li>
  236. <a href="http://v.huya.com/play/1143961.html?lol"><img src="http://img3.dwstatic.com/kan/1604/323951041290/1459996924973.jpg" alt="男子被邀请拍X片,险被爆菊"><em>男子被邀请拍X片,险被爆菊</em><span class="m-list__mask"></span></a>
  237. </li>
  238. <li>
  239. <a href="http://v.huya.com/play/1569062.html?lol"><img src="http://img1.dwstatic.com/kan/1604/323955608934/1460000705080.jpg" alt="【不科学纠察队1】罕见腰窝,竟然长这样!"><em>【不科学纠察队1】罕见腰窝,竟然长这样!</em><span class="m-list__mask"></span></a>
  240. </li>
  241. <li>
  242. <a href="http://v.huya.com/play/1639456.html?lol"><img src="http://img4.dwstatic.com/kan/1604/323954113804/1459999026916.jpg" alt="【涨姿势】10大最变态的女老师"><em>【涨姿势】10大最变态的女老师</em><span class="m-list__mask"></span></a>
  243. </li>
  244. <li>
  245. <a href="http://v.huya.com/play/1638279.html?lol"><img src="http://img2.dwstatic.com/kan/1604/323918369441/1459964252036.jpg" alt="【短片】美女参加面试竟然被脱光"><em>【短片】美女参加面试竟然被脱光</em><span class="m-list__mask"></span></a>
  246. </li>
  247. </ul>
  248. </div>
  249. </div>
  250. <script>
  251. var specialTab = (function(){
  252. var tab_wrap = $('#specialTab'),
  253. tab_btn = tab_wrap.find('.title').find('span'),
  254. tab_cont = tab_wrap.find('.mod-pic'),
  255. index = Math.round(Math.random());
  256. var init = function(){
  257. tab_btn.eq(index).addClass('current-nav');
  258. tab_cont.eq(index).addClass('current');
  259. tab_btn.on('hover',function(){
  260. var t = $(this).index();
  261. $(this).addClass('current-nav').siblings().removeClass();
  262. tab_cont.eq(t).addClass('current').siblings().removeClass('current')
  263. })
  264. };
  265. return{
  266. init:init
  267. }
  268. })();
  269. specialTab.init();
  270. </script>
  271. <!-- 图集推荐 end -->
  272. <div class="ZQ-gap"></div>
  273. <!-- }通用评论 -->
  274. <div id="comment_frame">
  275. <script>
  276. // 指定某篇文章的评论
  277. var comment3Uniqid = '250085e23dbe5891c39070154e378070';
  278. </script>
  279. <script src="http://comment3.duowan.com/scripts/comments.js"></script>
  280. </div>
  281. <!-- }通用评论 -->
  282. </div>
  283. <!-- }文章页 -->
  284. <!-- 内页侧边栏{ -->
  285. <div class="ZQ-71-19">
  286. <% include tpl/partial/page-aside %>
  287. </div>
  288. <!-- }内页侧边栏 -->
  289. </div>
  290. </div>
  291. <!-- }专区内容 -->
  292. <!-- 专区底部{ -->
  293. <% include tpl/partial/zq-foot %>
  294. <!-- }专区底部 -->
  295. </div>
  296. <!-- }专区 -->
  297. </body>
  298. <script src="http://assets.dwstatic.com/common/js/jquery.js"></script>
  299. <script src="http://assets.dwstatic.com/b=lego/2.0.0/js&f=lego.switchable.js"></script>
  300. <script src="js/main.js"></script>
  301. <script>
  302. //格式文章页图片
  303. ZQ.imageLightbox();
  304. </script>
  305. <script src="js/dnf-rec-zq.js"></script>
  306. <script src="http://www.5153.com/static/js/dnf-rec-interface.js"></script>
  307. </html>