新乡部队站列表

直接使用代码

图片素材

无

css代码

<style >   
/*首页公共栏目导航*/
.com-nav { background: url(http://www.bootfastui.cn/img/2020/0728/bg_lanmu_03.png);background-repeat:repeat-x;min-height:40px;position:relative;margin-top:20px}
.com-nav .tu3{float:left;margin-top:8px;margin-left:5px;width:30px;height:30px;color:#fff;font-size:20px;text-align: center;line-height: 30px;}
.com-nav p {float:left;margin:10px 20px;}
.com-nav p a {color:#63b8f8;font-size:18px;font-weight:550;}
.com-nav  .ul2 {position:absolute;right:10px;margin-top:10px; text-align:right}
.com-nav  .ul2 li {float:left;line-height:25px;}
.com-nav  .ul2 li a {color:#333;font-size:15px; display:block;padding:0 12px; }
.com-nav  .ul2 li a:hover {color:#F00;text-decoration:none;}
.com-nav  .ul2 li.current a{ background:#09f; color:#fff;border-radius:5px; }

/*首页公用文章列表*/
ul.com-index-article{ padding:10px; margin:0; list-style:inside; border:1px solid #efefef; min-height:260px;}
ul.com-index-article li{line-height:25px; clear:both; background:url(http://www.bootfastui.cn/img/2020/0728/bg_list.png) no-repeat left 5px; list-style:none; padding-left:20px; }
ul.com-index-article li:hover{background:url(http://www.bootfastui.cn/img/2020/0728/bg_list2.png) no-repeat left 5px; }
ul.com-index-article li span{ display:inline-block; float:right}
ul.com-index-article li a{ color:#666; font-size:15px;}
ul.com-index-article li a:hover{ color:#09F}



/*部队动态+轮播图切换*/
#index-dongtai{ margin-top:20px;}
#index-dongtai .top h5 a{ display:block; font-size:19px; color:#f00; text-align:center; line-height:45px}
#index-dongtai .top p{ padding:0 20px; color:#666; font-size:15px; margin:0; text-align:center; line-height:26px}
#index-dongtai .top p a{font-size:15px;}

#index-dongtai .imglist{ position:relative; display:block; height:110px;margin-top:15px}
#index-dongtai .imglist p{ position:absolute; bottom:0; left:0; line-height:25px; background:rgba(0, 0, 0, 0.5); color:#fff; width:100%;  padding-left:30px;  font-size:13px}
#index-dongtai .imglist:hover p{ color:#0CF}
#index-dongtai .tab-content2{ display:none}
</style>

HTML+JS代码

   
    <div id="index-dongtai" class="container">
        <div class="row">
            <div class="col-md-12">
                <div class=" com-nav">
                    <div class="tu3"><span class="glyphicon glyphicon-star"></span></div>
                    <p><a>部队动态</a></p>
                    <ul class="ul2 tab-title2">

                        <li><a>参谋部</a></li>
                        <li><a>政治部</a></li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
            <div class="col-md-12  " style=" position:relative; top:-4px; height:390px">
                <div class="bk pad-x20">
                    <div class="row">
                        <!--内容块 -->
                        <div class="col-md-8 tab-content2" style="display:block">
                            <div class="top">

                                <h5 class="title"><a href="__URL__/article_article/id/{$vo.id}">测试参谋部动态1</a></h5>
                                <p class="description">杭州一位31岁的妈妈，在去年底例行查体时，发现自己得了甲状腺癌。
                                    她写了一篇《当31岁遇见癌症》的自述体文章，讲自己是一个工作狂+吃货，天天吃... &nbsp;&nbsp;<a
                                        href="__URL__/article_article/id/{$vo.id}">[详情]</a></p>

                            </div>
                            <div class="row">

                                <ul class="com-index-article " style="border: none;">

                                    <li ><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li ><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>

                                </ul>


                                <div class="clear"></div>
                            </div>
                        </div>

                        <div class="col-md-8 tab-content2">
                            <div class="top">

                                <h5 class="title"><a href="__URL__/article_article/id/{$vo.id}">测试参谋部动态2</a></h5>
                                <p class="description">杭州一位31岁的妈妈，在去年底例行查体时，发现自己得了甲状腺癌。
                                    她写了一篇《当31岁遇见癌症》的自述体文章，讲自己是一个工作狂+吃货，天天吃... &nbsp;&nbsp;<a
                                        href="__URL__/article_article/id/{$vo.id}">[详情]</a></p>

                            </div>
                            <div class="row">

                                <ul class="com-index-article3">

                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                                    <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>

                                </ul>


                                <div class="clear"></div>
                            </div>
                        </div>

                        <script type="text/javascript">
                            $(function () {
                                $(".tab-title2 li").hover(function () {
                                    $num = $(this).index();
                                    $(".tab-title2 li").removeClass('current')
                                    $(this).addClass('current');
                                    $('.tab-content2').hide()
                                    $('.tab-content2').eq($num).show();
                                })
                            })
                        </script>

                        <!--图片块 -->
                        <div class="col-md-4">

                            <div class="col-md-6">
                                <div class="padding10">
                                    <a href="__URL__/article_article/id/{$vo.id}" class="imglist">
                                        <img src="/public/images/img32.jpg" width="100%" height="110px" />
                                        <p class="pm">&nbsp;&nbsp;测试文章标题</p>
                                    </a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="padding10">
                                    <a href="__URL__/article_article/id/{$vo.id}" class="imglist">
                                        <img src="/public/images/img32.jpg" width="100%" height="110px" />
                                        <p class="pm">&nbsp;&nbsp;测试文章标题</p>
                                    </a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="padding10">
                                    <a href="__URL__/article_article/id/{$vo.id}" class="imglist">
                                        <img src="/public/images/img32.jpg" width="100%" height="110px" />
                                        <p class="pm">&nbsp;&nbsp;测试文章标题</p>
                                    </a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="padding10">
                                    <a href="__URL__/article_article/id/{$vo.id}" class="imglist">
                                        <img src="/public/images/img32.jpg" width="100%" height="110px" />
                                        <p class="pm">&nbsp;&nbsp;测试文章标题</p>
                                    </a>
                                </div>
                            </div>


                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--dongtai end-->
    <div class="clear"></div>
    <!--图片组1-->
    <div id="index-tuzu" class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="padding5">
                    <a><img src="/public/images/img31.jpg" width="100%" height="144" /></a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="padding5">
                    <a><img src="/public/images/img31.jpg" width="100%" height="144" /></a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="padding5">
                    <a><img src="/public/images/img31.jpg" width="100%" height="144" /></a>
                </div>
            </div>
            <div class="col-md-3">
                <div class="padding5">
                    <a><img src="/public/images/img31.jpg" width="100%" height="144" /></a>
                </div>
            </div>
        </div>
    </div>
    <!--图片组1 end-->
    <div class="clear"></div>

    <!--政策法规-->
    <div id="index-fagui" class="container">
        <div class="row">
            <div class="col-md-6">
                <div class=" com-nav  ">
                    <div class="tu3"><span class="glyphicon glyphicon-star"></span></div>
                    <p><a>政工研究</a></p>
                    <ul class="ul2">
                        <li><a href="__URL__/list_article/channelId/11/typeid/51">More>></a></li>
                    </ul>
                </div>
                <div>
                    <ul class=" com-index-article">
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>


                    </ul>
                </div>

            </div>
            <!--col-md-6 end-->
            <div class="col-md-6">
                <div class="margin-left15 ">
                    <div class=" com-nav">
                        <div class="tu3"><span class="glyphicon glyphicon-star"></span></div>
                        <p><a>组织工作</a></p>
                        <ul class="ul2">
                           
                                <li><a href="">政治工作</a></li>
                                <li><a href="">基层工作</a></li>
                                <li><a href="">政治工作</a></li>
                         
                        </ul>
                    </div>
                    <div>
                        <ul class=" com-index-article">
                            <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>
                        <li><a href="__URL__/article_article/id/{$vo.id}">请记住：熬过去，一切都会好起来</a></li>

                        </ul>
                    </div>

                </div>
            </div>
            <!--col-md-6 end-->
        </div>
        <!--row end-->

    </div>
    <!--id end-->
    <!--政策法规 end-->
    <div class="clear"></div>