当前位置:   article > 正文

CoreThink主题开发(六)使用H-ui开发博客主题之首页友情链接标签混排_titonclassname:"active

titonclassname:"active

感谢H-ui、感谢CoreThink!

效果图:

不哆嗦了,代码:

  1. <div class="line"></div>
  2. <h5>友情链接</h5>
  3. <div class="pd-10 tags">
  4. <cms:friendly_link name="fl1" type="1">
  5. <a href="{$fl1.url}">{$fl1.title}</a>
  6. </cms:friendly_link>
  7. </div>

Blog/Home/Index/index.html

  1. <extend name="$_home_public_layout"/>
  2. <block name="style">
  3. <style type="text/css">
  4. .slider {
  5. position: relative;
  6. text-align: center;
  7. margin: 0 auto;
  8. z-index: 1;
  9. }
  10. .slider .bd, .slider .bd li, .slider .bd img {
  11. width: 960px;
  12. height: 272px
  13. }
  14. /*请给每个幻灯片套个div并设置id,通过id重置这个地方的宽度,达到自定义效果*/
  15. .slider .bd {
  16. z-index: 2;
  17. overflow: hidden
  18. }
  19. .slider .bd li {
  20. float: left;
  21. width: 100%;
  22. overflow: hidden;
  23. background-position: center;
  24. background-repeat: no-repeat
  25. }
  26. .slider .bd li a {
  27. display: block;
  28. width: 100%;
  29. height: 100%
  30. }
  31. .slider .bd li img {
  32. display: block
  33. }
  34. .slider .hd {
  35. position: absolute;
  36. z-index: 3;
  37. left: 0;
  38. right: 0;
  39. bottom: 10px;
  40. padding: 0 10px;
  41. text-align: center
  42. }
  43. .slider .hd li {
  44. display: inline-block;
  45. text-align: center;
  46. margin-right: 10px;
  47. cursor: pointer;
  48. background-color: #C2C2C2
  49. }
  50. .slider .hd li.active {
  51. background-color: #222
  52. }
  53. /*圆点*/
  54. .dots li {
  55. width: 10px;
  56. height: 10px;
  57. font-size: 0px;
  58. line-height: 0px;
  59. border-radius: 50%
  60. }
  61. /*数字*/
  62. .numbox li {
  63. width: 20px;
  64. height: 20px;
  65. line-height: 20px;
  66. font-size: 13px;
  67. font-family: Arial;
  68. font-weight: bold;
  69. text-indent: inherit;
  70. }
  71. .numbox li.active {
  72. color: #fff
  73. }
  74. /*长方条*/
  75. .rectangle li {
  76. width: 40px;
  77. height: 10px;
  78. font-size: 0px;
  79. line-height: 0px
  80. }
  81. </style>
  82. </block>
  83. <block name="script">
  84. <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
  85. <script type="text/javascript">
  86. $(function () {
  87. jQuery("#slider-3 .slider").slide({
  88. mainCell: ".bd ul",
  89. titCell: ".hd li",
  90. trigger: "click",
  91. effect: "leftLoop",
  92. autoPlay: true,
  93. delayTime: 700,
  94. interTime: 7000,
  95. pnLoop: false,
  96. titOnClassName: "active"
  97. });
  98. });
  99. </script>
  100. </block>
  101. <block name="main">
  102. <div id="slider-3">
  103. <div class="slider">
  104. <div class="bd">
  105. <ul>
  106. <cms:slider_list name="sl">
  107. <li>
  108. <a href="{$sl.url}" target="_blank">
  109. <img src="{$sl.cover|get_cover}"/>
  110. </a>
  111. </li>
  112. </cms:slider_list>
  113. </ul>
  114. </div>
  115. <ol class="hd cl dots">
  116. <cms:slider_list name="sl">
  117. <li>{$i}</li>
  118. </cms:slider_list>
  119. </ol>
  120. </div>
  121. </div>
  122. <br>
  123. <div class="container">
  124. <div class="line"></div>
  125. <h1>站点公告</h1>
  126. <table class="table table-hover">
  127. <tbody>
  128. <cms:notice_list name="vo" limit="8">
  129. <tr>
  130. <th><a href="{$vo.href}">{$vo.title|cut_str=0,20}</a></th>
  131. <td><span class="label label-secondary radius">{$vo.create_time|time_format}</span></td>
  132. </tr>
  133. </cms:notice_list>
  134. </tbody>
  135. </table>
  136. <div class="line"></div>
  137. <h5>友情链接</h5>
  138. <div class="pd-10 tags">
  139. <cms:friendly_link name="fl1" type="1">
  140. <a href="{$fl1.url}">{$fl1.title}</a>
  141. </cms:friendly_link>
  142. </div>
  143. </div>
  144. </block>


本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号