设为首页收藏本站
切换到宽版

【老刘社区资源网】

 找回密码
 注册
快捷导航
【老刘社区资源网】»首页 › [社区站务/网页教程/网站公告] › 『网站教程』 › dz论坛分类列表模板亲测
返回列表 发新帖

dz论坛分类列表模板亲测

[复制链接]
发表于 2021-9-8 21:11:36 | 显示全部楼层 |阅读模式
  1. <style>
  2. @media screen and (max-width: 500px) {
  3.          .jnpar_listcon{
  4.                  width: 95%;
  5.                  margin: 0.3rem;
  6.                  border: 1px solid #DDD;
  7.                 float:left;
  8.          }
  9.          .price_y{
  10.                  text-decoration: line-through;
  11.                  color: #BBB;
  12.                  margin-left: 0.15rem;
  13.                  font-size: 0.5rem;
  14.          }
  15.          .price_n{
  16.                  color: red;
  17.                  font-size: 0.7rem;
  18.          }
  19.          .count_red{
  20.                  color: red;
  21.                  font-size: 0.7rem;
  22.          }
  23.          .span_y{
  24.                  float: right;
  25.                  font-size: 0.5rem;
  26.          }
  27.          .jnpar_listinfo{
  28.                  padding: 0.5rem;
  29.                 padding-top:0px;
  30.          }
  31.          .jnpar_online{
  32.                  line-height: 1.5rem;
  33.                  font-family: '微软雅黑';
  34.                  font-size: 0.7rem;
  35.          }
  36.          .commidy_title{
  37.                  display: inline-block;
  38.                  font-size: 0.7rem;
  39.          }
  40.         .onlypc{display: none;}
  41.         .list_allcon{padding:0.5rem;background:white;}
  42. }
  43. @media screen and (min-width: 501px) {
  44.          .jnpar_listcon{
  45.                  width: 280px;
  46.                  margin: 6px;
  47.                  border: 1px solid #DDD;
  48.                 float:left;
  49.          }
  50.          .price_y{
  51.                  text-decoration: line-through;
  52.                  color: #BBB;
  53.                  margin-left: 5px;
  54.          }
  55.          .price_n{
  56.                  color: red;
  57.                  font-size: 16px;
  58.          }
  59.          .count_red{
  60.                  color: red;
  61.          }
  62.          .span_y{
  63.                  float: right;
  64.          }
  65.          .jnpar_listinfo{
  66.                  padding: 10px;
  67.                 padding-top:0px;
  68.          }
  69.          .jnpar_online{
  70.                  line-height: 30px;
  71.                  font-family: '微软雅黑';
  72.                  font-size: 14px;
  73.                  border-bottom: 1px solid #EEE;
  74.                  overflow: hidden;/*超出部分隐藏*/
  75.                  white-space: nowrap;/*不换行*/
  76.                  text-overflow:ellipsis;/*超出部分文字以...显示*/
  77.          }
  78.          .commidy_title{
  79.                  min-width: 50px;
  80.                  font-weight: bold;
  81.                  font-size: 15px;
  82.          }
  83. .jnpar_listauthor img{
  84.         width: 19px;
  85.         border-radius: 50%;
  86.         vertical-align: middle;
  87.         margin-right: 5px;
  88. }
  89.         .list_allcon{padding:10px;}
  90. }
  91.          
  92. </style>
  93. <div class="list_allcon cl">
  94. [loop]
  95. <div class="jnpar_listcon">
  96.         <div class="main_img">
  97.                 <a href="{subject_url}" target="_blank"><img src="{cphoto_9_value}" width="100%" height="300px"/></a>
  98.         </div>
  99.         <div class="jnpar_listinfo">
  100.                 <div class="jnpar_online"><span class="price_n">{price_n_9_value}金币</span><span class="price_y"></span><span class="span_y">VIP会员免费</span></div>
  101.                 <div class="jnpar_online"  style="padding-bottom:3px;"><a href="{subject_url}" title="{subject}" class="commidy_title">{subject}</a></div>
  102.                
  103.                 <div class="jnpar_online onlypc" style="border-top:1px dashed #EEE;padding-top:1px;"><span class="jnpar_listauthor"><img src="{avatar_small}"/></span><a href="{author_url}">{author}</a><span class="span_y"><a href="http://wpa.qq.com/msgrd?v=3&uin=304192058&site=Discuz! Board&menu=yes&from=discuz" target="_blank" title="QQ"><img src="source/plugin/jnpar_sortshop/images/site_qq.jpg" alt="QQ" style="margin-top:3px;"></a></div>

  105.         </div>
  106. </div>

  108. [/loop]
  109. </div>
  110. <script src="source/plugin/jnpar_sortshop/js/jquery.min.js" type="text/javascript"></script>
  111. <script>
  112. jq=jQuery.noConflict();
  113. </script>
  114. <script>
  115. jq(document).ready(function() {
  116.     jq(".count_red").each(function() {
  117.         var sales = (jq(this).text());
  118.         if(/^\s*?$/.test(sales)) {
  119.             //如果是空的
  120.             jq(this).text(0)
  121.         } else {
  122.         }
  123.     });
  124. });
  125. </script>
复制代码
0.jpg -------------------------------------------------------------------------
0.jpg
  1. <div class="ue_fenlei">
  2. [loop]
  3. <div class="t_i">
  4. <div class="l_title">
  5. <div class="l_title_t">
  6. <font color="red">
  7. [{price_n_9_value}金币]
  8. </font>
  9. <a href="{subject_url}" onclick="atarget(this)" class="xst" target="_blank">{subject}</a>
  10. <em class="webprice"></em>{attachment}
  11. </div>
  12. <div class="p_info">{dateline}</div>
  13.          
  14. </div>
  15. </div>
  16. [/loop]
  17. </div>
  18. <style>
  19. .ue_fenlei {overflow: hidden;padding:0 10px 10px 10px;}
  20. .ue_fenlei .t_i {float: left;width: 100%;padding: 8px 5px;border-bottom: 1px dashed #dfdfdf;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
  21. .ue_fenlei .l_title {float: left;width: 100%;font-size: 14px;}
  22. .ue_fenlei .l_title .l_title_t {float: left;}
  23. .ue_fenlei .l_title .l_title_t .xst {max-width: 730px;display: inline-block;height: 19px;overflow: hidden;/* line-height: 23px; */text-overflow: ellipsis;white-space: nowrap;vertical-align: top;}
  24. .ue_fenlei .l_title .webprice {color: #F32929;padding-top: 1px;}
  25. .ue_fenlei .l_title em {margin-right: 4px;}
  26. .ue_fenlei .l_title .p_info {float: right;color: #9d9d9d;font-size: 12px;}
  27. </style>
复制代码



回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|【老刘社区资源网】

GMT+8, 2024-9-19 11:25 , Processed in 0.056749 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2012 Comsenz Inc. Template by A3cn

返回顶部