CoreThink主题开发（六）使用H-ui开发博客主题之首页友情链接标签混排

感谢H-ui、感谢CoreThink！

效果图：

不哆嗦了，代码：

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

        </div>

Blog/Home/Index/index.html

<extend name="$_home_public_layout"/>
<block name="style">
    <style type="text/css">
        .slider {
            position: relative;
            text-align: center;
            margin: 0 auto;
            z-index: 1;
        }

        .slider .bd, .slider .bd li, .slider .bd img {
            width: 960px;
            height: 272px
        }

        /*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
        .slider .bd {
            z-index: 2;
            overflow: hidden
        }

        .slider .bd li {
            float: left;
            width: 100%;
            overflow: hidden;
            background-position: center;
            background-repeat: no-repeat
        }

        .slider .bd li a {
            display: block;
            width: 100%;
            height: 100%
        }

        .slider .bd li img {
            display: block
        }

        .slider .hd {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            bottom: 10px;
            padding: 0 10px;
            text-align: center
        }

        .slider .hd li {
            display: inline-block;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
            background-color: #C2C2C2
        }

        .slider .hd li.active {
            background-color: #222
        }

        /*圆点*/
        .dots li {
            width: 10px;
            height: 10px;
            font-size: 0px;
            line-height: 0px;
            border-radius: 50%
        }

        /*数字*/
        .numbox li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            font-family: Arial;
            font-weight: bold;
            text-indent: inherit;
        }

        .numbox li.active {
            color: #fff
        }

        /*长方条*/
        .rectangle li {
            width: 40px;
            height: 10px;
            font-size: 0px;
            line-height: 0px
        }
    </style>
</block>
<block name="script">

    <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
    <script type="text/javascript">
        $(function () {
            jQuery("#slider-3 .slider").slide({
                mainCell: ".bd ul",
                titCell: ".hd li",
                trigger: "click",
                effect: "leftLoop",
                autoPlay: true,
                delayTime: 700,
                interTime: 7000,
                pnLoop: false,
                titOnClassName: "active"
            });
        });
    </script>
</block>
<block name="main">
    <div id="slider-3">
        <div class="slider">
            <div class="bd">
                <ul>

                    <cms:slider_list name="sl">
                        <li>
                            <a href="{$sl.url}" target="_blank">
                                <img src="{$sl.cover|get_cover}"/>
                            </a>
                        </li>
                    </cms:slider_list>

                </ul>
            </div>
            <ol class="hd cl dots">
                <cms:slider_list name="sl">
                    <li>{$i}</li>
                </cms:slider_list>
            </ol>
        </div>
    </div>
    <br>
    <div class="container">
        <div class="line"></div>
        <h1>站点公告</h1>
        <table class="table table-hover">
            <tbody>
            <cms:notice_list name="vo" limit="8">
                <tr>
                    <th><a href="{$vo.href}">{$vo.title|cut_str=0,20}</a></th>
                    <td><span class="label label-secondary radius">{$vo.create_time|time_format}</span></td>
                </tr>

            </cms:notice_list>
            </tbody>
        </table>
        <div class="line"></div>
        <h5>友情链接</h5>
        <div class="pd-10 tags">
            <cms:friendly_link name="fl1" type="1">
                <a href="{$fl1.url}">{$fl1.title}</a>
            </cms:friendly_link>

        </div>

    </div>


</block>