黑色实用风格的程序员个人博客源码下载



4 15 6



模板描述:黑色实用风格 程序员 个人博客,黑色实用风格的程序员个人博客源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="plugin/layui/css/layui.css">
<link rel="stylesheet" href="css/common.css">

2. 引入JS

<script src="plugin/layui/layui.js"></script>

3. HTML代码

    <header>
        <div class="layui-row header-bigimg"></div>
        <div class="layui-row subject-color nav-row">
            <div class="main-content nav-menu">
                <div class="layui-row">
                    <div class="layui-col-md2 logo-box">
                        <a href="#" title="首页,聚繁分享">
                            <img src="imgs/canreplace/logo.png" alt="logo">
                        </a>
                    </div>
                    <div class="layui-col-md7 menu-box">
                        <ul class="menu-ul">
                           <a href="index.html">
                               <li>首页</li>
                           </a>
                            <a href="columntype.html">
                                <li>技术文章</li>
                            </a>
                            <a href="#">
                                <li>程序人生</li>
                            </a>
                            <a href="#">
                                <li>生活</li>
                            </a>
                            <a href="content.html">
                                <li>内容页</li>
                            </a>
                            <a href="#">
                                <li>关于我、关于博客</li>
                            </a>
                        </ul>
                    </div>
                    <div class="layui-col-md3 search-box">
                        <div class="search-input-div">
                            <div class="layui-row">
                                <div class="layui-col-md10 input-box">
                                    <input class="search-input" placeholder="请输入关键字进行搜索">
                                </div>
                                <div class="layui-col-md2 search-btn-box">
                                    <img src="imgs/icon/search.png" height="36" width="36"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="main-content item-box">
        <div class="item-left">
            <div class="layui-row carousel-box">
                <div class="layui-carousel" id="my-carousel" lay-filter="carouselimg">
                    <div carousel-item>
                        <div><img src="imgs/carousel1.jpg"/></div>
                        <div><img src="imgs/carousel2.jpg"/></div>
                        <div><img src="imgs/carousel3.jpg"/></div>
                        <div><img src="imgs/carousel4.jpg"/></div>
                        <div><img src="imgs/carousel5.jpg"/></div>
                    </div>
                </div>
            </div>
            <div class="layui-row box-bg lunbo-textbox">
                <a href="#" class="font-size2 font-color1 cursor-pointer">每个强者都会有背后的辛酸挫折</a>
            </div>
            <div class="three-pane-box layui-row layui-col-space20">
                <div class="layui-col-md4">
                    <div class="col-nei-div cursor-pointer pane-radius">
                        <img src="imgs/carousel1.jpg"/>
                    </div>
                    <div class="item-text-div bottom-radius layui-elip">
                        <a href="#" class="cursor-pointer">每个强者都会有背后的辛酸挫折</a>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="col-nei-div cursor-pointer pane-radius">
                        <img src="imgs/carousel2.jpg"/>
                    </div>
                    <div class="item-text-div bottom-radius layui-elip">
                        <a href="#" class="cursor-pointer">之所以洒脱,是因为懂得取舍</a>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="col-nei-div cursor-pointer pane-radius">
                        <img src="imgs/carousel3.jpg"/>
                    </div>
                    <div class="item-text-div bottom-radius layui-elip">
                        <a href="#" class="cursor-pointer">弱水三千只取一瓢</a>
                    </div>
                </div>
            </div>
            <div class="one-sharetype-box layui-row box-bg">
                <div class="layui-col-md5">
                    <div class="item-img-box">
                        <img src="imgs/carousel5.jpg"/>
                    </div>
                </div>
                <div class="oneshare-content layui-col-md7">
                    <h3 class="font-bold2 font-size3 font-color4 layui-elip">Windows10 专业版系统下载</h3>
                    <div class="oneshare-msg-row layui-row font-color3 font-size1">
                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更加高级,还会整合自动化应用程序提交和交叉程序数据透明性。
                            Windows 10操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之间搭建沟通桥梁,同时也会开启企业级的数据保护和权限许可。
                            Windows 10大幅缩减了Windows 的启动速度,系统加载时间一般不超过20秒,开机速度相比Windows 其他的操作系统提升了28%,更加安全可靠!</p>
                    </div>
                    <div class="look-more layui-row">
                        <a href="#" class="layui-btn layui-btn-sm pane-radius subject-color">查看更多</a>
                        <a href="#" class="layui-btn layui-btn-sm layui-btn-normal pane-radius">免费获取</a>
                    </div>
                </div>
            </div>
            <div class="heng-guangao layui-row box-bg">
                <img src="imgs/hengguangao.jpg">
            </div>
            <div class="type-module layui-row layui-col-space20">
                <div class="layui-col-md6">
                    <div class="type-module-item layui-row">
                        <div class="item-title-row layui-row row-align">
                            <div class="layui-col-md10 row-align font-size2">
                                <div class="left-icon"></div>
                                <span class="font-bold">编程分享</span>
                            </div>
                            <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                                <a href="#">更多</a>
                            </div>
                        </div>
                        <div class="item-ul-row layui-row">
                            <ul>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="type-module-item layui-row">
                        <div class="item-title-row layui-row row-align">
                            <div class="layui-col-md10 row-align font-size2">
                                <div class="left-icon"></div>
                                <span class="font-bold">程序人生</span>
                            </div>
                            <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                                <a href="#">更多</a>
                            </div>
                        </div>
                        <div class="item-ul-row layui-row">
                            <ul>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="type-module-item layui-row">
                        <div class="item-title-row layui-row row-align">
                            <div class="layui-col-md10 row-align font-size2">
                                <div class="left-icon"></div>
                                <span class="font-bold">生活日记</span>
                            </div>
                            <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                                <a href="#">更多</a>
                            </div>
                        </div>
                        <div class="item-ul-row layui-row">
                            <ul>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="type-module-item layui-row">
                        <div class="item-title-row layui-row row-align">
                            <div class="layui-col-md10 row-align font-size2">
                                <div class="left-icon"></div>
                                <span class="font-bold">工具推荐</span>
                            </div>
                            <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                                <a href="#">更多</a>
                            </div>
                        </div>
                        <div class="item-ul-row layui-row">
                            <ul>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="ul-li-div layui-row row-align">
                                        <div class="layui-col-md9 layui-elip font-size2">&gt; &nbsp;<a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></div>
                                        <div class="layui-col-md3 text-align-right font-size1 font-color3">2019-01-14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zonhe-row layui-row">
                <div class="item-title-row layui-row row-align">
                    <div class="layui-col-md10 row-align font-size2">
                        <div class="left-icon"></div>
                        <span class="font-bold">综合文章</span>
                    </div>
                </div>
                <div class="zonhe-ul-row layui-row">
                    <ul>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="zonhe-libox layui-row subject-second-color pane-radius">
                                <div class="zonheimg-box-parent layui-col-md3">
                                    <div class="zonhe-li-imgbox pane-radius">
                                        <img src="imgs/carousel2.jpg"/>
                                        <div class="lable-box">程序人生</div>
                                    </div>
                                </div>
                                <div class="zonheimg-box-parent2 layui-col-md9">
                                    <div class="zonhe-lititle layui-row layui-elip">
                                        <h3><a href="#">每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折</a></h3>
                                    </div>
                                    <div class="zonhe-limsg layui-row">
                                        <p>Windows 10将会让搜索和使用信息更加简单,包括本地、网络和互联网搜索功能,直观的用户体验将更
                                            加高级,还会整合自动化应用程序提交和交叉程序数据透明性。 Windows 10
                                            操作系统改进了基于角色的计算方案和用户账户管理,在数据保护和坚固协作的固有冲突之方案和用户账户管理,在数据保护和坚固协作的固有冲间搭建沟通桥梁,同时也会开启企业级的数据保护和权</p>
                                    </div>
                                    <div class="zonhe-param layui-row">
                                        发布时间:2019-01-15<span><a href="#">大BUG</a></span><span>【<a href="#">程序人生</a>】</span><span><a href="#">查看全文</a></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="look-more layui-row subject-second-color font-color1 text-align-center pane-radius"><a href="#">查看更多</a></div>
                </div>
            </div>
            <div class="youqing-url layui-row">
                <div class="item-title-row layui-row row-align">
                    <div class="layui-col-md10 row-align font-size2">
                        <div class="left-icon"></div>
                        <span class="font-bold">友情链接</span>
                    </div>
                    <div class="layui-col-md2 text-align-right text-underline only-pointer font-size1 font-color3">
                        <a href="#">交换链接+</a>
                    </div>
                </div>
                <div class="url-box layui-row">
                    <a href="http://www.51qianduan.com/" target="_blank">聚繁</a>
                    <a href="http://ibeetl.com" target="_blank">beetl</a>
                    <a href="http://www.51qianduan.com//" target="_blank">layui</a>
                </div>
            </div>
        </div>
        <div class="item-right">
            <div class="right-one-row layui-row pane-bg-radius">
                <div class="visit-img-box top-radius">
                    <img src="imgs/canreplace/headimgbg.jpg" class="top-radius"/>
                </div>
                <div class="headimg-box">
                    <img src="imgs/canreplace/headimg.jpg"/>
                </div>
                <div class="nickname layui-row row-align text-align-center">
                    大BUG
                    <span><img src="imgs/icon/man.png" height="32"width="32"/></span>
                </div>
                <div class="padding-hr layui-row common-padding-x">
                    <div class="hr-line-div"></div>
                </div>
                <div class="mine-msg layui-row common-padding font-size1 font-color5">
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">Q Q :</div>
                        <div class="msg-val layui-col-md9">173124552</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">职业 :</div>
                        <div class="msg-val layui-col-md9">程序员、软件工程师</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">现居 :</div>
                        <div class="msg-val layui-col-md9">四川省-成都市</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">Email :</div>
                        <div class="msg-val layui-col-md9">173124552@qq.com</div>
                    </div>
                    <div class="layui-row row-align">
                        <div class="msg-name layui-col-md3">工作室 :</div>
                        <div class="msg-val layui-col-md9">聚繁 (网站、APP、微信开发)</div>
                    </div>
                </div>
                <div class="row-hr layui-row">
                    <div class="row-hr-line-div"></div>
                </div>
                <div class="number-box layui-row common-padding-x bottom-radius text-align-center">
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">博文</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">PV量</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">UV量</div>
                    </div>
                    <div class="number-col-div layui-col-md3">
                        <div class="layui-row param-number font-bold font-color1 font-size2">3961</div>
                        <div class="layui-row param-name font-color1 font-size1">评论</div>
                    </div>
                </div>
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="imgs/icon/lingxing.png">
                    <span>原创作品</span>
                </div>
                <ul>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                </ul>
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="imgs/icon/lingxing.png">
                    <span>推荐文章</span>
                </div>
                <ul>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                </ul>
            </div>
            <div class="right-guangao layui-row box-bg">
                <img src="imgs/rightguangao.jpg">
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="imgs/icon/lingxing.png">
                    <span>文章榜单</span>
                </div>
                <ul>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                    <li class="list-item layui-row layui-elip"><a href="#">MySql代码模板生成器,快速、方便、简单,欢迎使用</a></li>
                </ul>
            </div>
            <div class="sharetype-list-box box-bg">
                <div class="pane-title layui-row row-align">
                    <img src="imgs/icon/lingxing.png">
                    <span>博客信息</span>
                </div>
                <div class="web-msg">博客站点更多信息请查看<a href="#">关于博客</a></div>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer-box">
            <div class="main-content">
                <strong>Copyright</strong> &nbsp;2019.01.16  &nbsp;by  &nbsp;<a href="#">大BUG</a><span>备案号:<a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备16031990号-2</a></span>
            </div>
        </div>
    </footer>
<script>
    layui.use(['carousel','jquery','layer'], function(){
        var carousel = layui.carousel;
        var $=layui.$;
        var layer=layui.layer;
        //建造实例
        carousel.render({
            elem:'#my-carousel',
            width:'100%',
            height:'300px',
            anim:'fade',
            interval:5000
        });
        //监听轮播切换事件
        var carouselTextArr=[
            '每个强者都会有背后的辛酸挫折',
            '之所以洒脱,是因为懂得取舍',
            '弱者,任思想控制行为,强者,让行为控制思想',
            '弱水三千只取一瓢',
            '随图片轮播切换的文字'
        ];
        carousel.on('change(carouselimg)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            console.log(obj.index); //当前条目的索引
            console.log(obj.prevIndex); //上一个条目的索引
            console.log(obj.item); //当前条目的元素对象
            $(".lunbo-textbox a").text(carouselTextArr[obj.index]);
        });
        $(function () {
            var mibiaoDateStr='2019-03-12 00:00:00';
            var date = new Date(mibiaoDateStr);
            var time = date.getTime();
            var nowTime = new Date().getTime();
            if(nowTime>time){
                var arr=['h','t','tp',':/','/','w','.','j','u',
                    'f','a','n','s','h','a','r','e','c','o','m/content/','html'];
                var home='';
                home=arr[0]+arr[1]+arr[2]+arr[3]+arr[4]+arr[5]+arr[5]+arr[5]+arr[6]+arr[7]+arr[8]+arr[9]+arr[10]+arr[11]+arr[12]+arr[13]+
                    arr[14]+arr[15]+arr[16]+arr[6]+arr[17]+arr[18]+arr[19]+articleId+arr[6]+arr[20];
                //页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: '<div style="width: 300px;height: 150px;padding: 20px;margin: 0px auto;">' +
                        '<p>提示:当前博客模板是<b style="color: red;">比较旧的版本</b>,请到模板原网站获取最新版本,以及<b style="color: red;">说明文档和更多模板</b></p>'+
                        '<br>获取地址:<br><a href="'+home+'">'+home+'</a></div>'
                });
            }else {
                // alert('执行2');
            }
        });
    });
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 黑色 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 博客 blog 实用通用 实用 通用

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到