<!--引入头部-->


<!--
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◇◇◇◇◇◆◇◇◇◆◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◇◇◇◇◆◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◇◆◇◇◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◆◇◇◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◇◇◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◆◆◇◇◇◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◆◆◆◆◆◆◆◇◇◇◇◆◆◆◆◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◆◇◇◆◆◆◆◆◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◆◇◇◇◇◆◆◇◇◆◆◇◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◆◆◆◆◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◆◆◇◇◇◇◆◆◆◆◇◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◆◇◇◇◇◇
◇◇◇◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◆◆◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◇◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◆◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◇◇◇◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◇◇◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◇◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◆◆◆◆◇◆◆◇◇◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◆◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◆◆◆◆◆◇◆◆◆◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
辄夜花泽Blog：https://www.blog.johnbin.cn -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="/static/blog/static/image/shortcut_icon.png" type="image/x-icon"/>
    <meta name="keywords" content="辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术">
    <meta name="description" content="辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术">
    <meta name='robots' content='noindex,follow'>
    <link rel="stylesheet" href="/static/blog/static/css/style.css?version=1726123286">
    <link rel="stylesheet" href="/static/blog/static/css/code.css?version=1726123286">
    <link rel="stylesheet" href="/static/blog/static/css/main.css?version=1726123286">
    <link rel="stylesheet" href="/static/blog/static/css/font-awesome.min.css?version=1726123286"> <!-- awesome-->
    <link rel="stylesheet" href="/static/blog/static/css/swiper.min.css?version=1726123286">  <!-- 轮播图-->
    <!--<link rel="stylesheet" href="/static/blog/static/css/monokai_sublime.min.css">-->
    <script type="text/javascript" src="/static/blog/static/js/highlight.min.js?version=1726123286"></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-1.12.4.js?version=1726123286'></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-migrate.min-1.4.1.js?version=1726123286'></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <style> .article-list .post-item-foot-icon span.m-r-sm:last-child{display:none}
    .article-list .post-item-foot-icon i:nth-child(3){display:none}</style>
    <link rel="stylesheet" class="rtl-css" id="rtl-css" href="">
    <link rel="stylesheet" class="layout-css" id="layout-css" href="">
</head>
<style>
    /*全部th和td添加样式*/
    th{
        text-align:center;
    }
    td{
        text-align:center;
    }
    /*全部input加上样式*/
    input {
        margin-top: 0;
        border: 1px solid #4680ff;
        border-radius: 3px;
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        -o-appearance:none;
        appearance:none;
        outline: none;
    }
    input[type='text']:focus{
        border-radius: 4px;
        border: 1px solid #4680ff;
        box-shadow: 0 0 5px 0px #4680ff;
    }
</style>
<body class="container box-layout background-blue">
<!-- [ Pre-loader ] start -->
<div class="loader-bg" style="display: none">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>

<title>&nbsp;&nbsp;&nbsp;Html-专题&nbsp;&nbsp;&nbsp;</title>
<!--引入导航栏-->
<nav class="pcoded-navbar menu-light ">
    <div class="navbar-wrapper  ">
        <div class="navbar-content scroll-div ">
            <div class="" style="display: none">
                <div class="main-menu-header">
                    <img class="img-radius" src="/static/blog/static/picture/avatar.png" alt="User-Profile-Image">
                    <div class="user-details">
                        <div id="more-details">辄夜花泽  <i class="fa fa-caret-down"></i></div>
                    </div>
                </div>
                <div class="collapse" id="nav-user-link">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="user-profile" data-toggle="tooltip" title="View Profile"><i class="feather icon-user"></i></a></li>
                        <li class="list-inline-item"><a href="email_inbox"><i class="feather icon-mail" data-toggle="tooltip" title="Messages"></i><small class="badge badge-pill badge-primary">5</small></a></li>
                        <li class="list-inline-item"><a href="auth-signin" data-toggle="tooltip" title="Logout" class="text-danger"><i class="feather icon-power"></i></a></li>
                    </ul>
                </div>
            </div>
            <!-- 左侧导航导航部分 -->
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-menu-caption">
                    <label>导航</label>
                </li>
            </ul>
            <ul id="menu-%e8%8f%9c%e5%8d%951" class="nav pcoded-inner-navbar">
                <li id="menu-item-1411" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1411">
                    <a href="http://blog.johnbin.cn/blog/index/index">
                        <span class="pcoded-micon">
                        <i class="feather icon-home"></i>
                    </span>首页
                    </a>
                </li>
                <li id="menu-item-1412" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1412">
                    <a target="_blank" href="#">
                        <span class="pcoded-micon">
                        <i class="feather icon-github"></i>
                        </span>仓库
                    </a>
                </li>
                <li id="menu-item-1413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1413">
                    <a href="http://blog.johnbin.cn/blog/index/message">
                        <span class="pcoded-micon">
                        <i class="fas fa-comments"></i>
                        </span>留言
                    </a>
                </li>
                <li id="menu-item-1417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1417">
                    <a href="http://blog.johnbin.cn/blog/index/topics">
                        <span class="pcoded-micon">
                            <i class="fas fa-columns"></i>
                        </span>专题
                    </a>
                </li>
                <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1417">
                    <a href="http://blog.johnbin.cn/blog/index/icon">
                        <span class="pcoded-micon">
                            <i class="fas fa-angry"></i>
                        </span>图标
                    </a>
                </li>
            </ul>

            <!-- 左侧导航组成部分 -->
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-menu-caption">
                    <label>组成</label>
                </li>
            </ul>
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon">
                            <i class="fas fa-splotch"></i>
                        </span>
                        <span class="pcoded-mtext">分类</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/777192611" title="视频">
                                 <span>视频</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/734137683" title="Laravel">
                                 <span>Laravel</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/701176514" title="工具">
                                 <span>工具</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/45917434" title="PHP">
                                 <span>PHP</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/20125912" title="Html">
                                 <span>Html</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/34533430" title="Ajax">
                                 <span>Ajax</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/52841698" title="Javascript">
                                 <span>Javascript</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70656814" title="Linux">
                                 <span>Linux</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/66362692" title="Mysql">
                                 <span>Mysql</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70878573" title="小程序">
                                 <span>小程序</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/97688234" title="Api">
                                 <span>Api</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/80998220" title="Ecshop">
                                 <span>Ecshop</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/267109849" title="Web">
                                 <span>Web</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/745114309" title="Jquery">
                                 <span>Jquery</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/630126983" title="ThinkPHP">
                                 <span>ThinkPHP</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/628147134" title="Yii">
                                 <span>Yii</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/790151821" title="辄夜花泽">
                                 <span>辄夜花泽</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/618169803" title="手册">
                                 <span>手册</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/662183728" title="源码">
                                 <span>源码</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/440202696" title="模板">
                                 <span>模板</span>
                            </a>
                        </li>
                                            </ul>
                </li>
            </ul>

            <ul class="nav pcoded-inner-navbar ">
                <!-- 左侧导航组成友情链接部分 -->
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon"><i class="feather icon-link"></i></span><span class="pcoded-mtext">友链</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                                            </ul>
                </li>
            </ul>
            <ul class="nav pcoded-inner-navbar ">
                <!-- 左侧导航组成在线工具部分 -->
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon">
                            <i class="fas fa-code"></i>
                        </span>
                        <span class="pcoded-mtext">在线工具</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                        <li style="display:none;"><a href="http://johnbin.cn/ptest/Azdy/crypt/X1B13GOI9/xhrt/3812f7bacb8fca7a1276ebcadca41e1e89e8aa36" target="_blank" title="抖音视频去水印" alt="抖音视频去水印">
                            <span>抖音视频去水印</span></a>
                        </li>
                        <li><a href="https://www.json.cn" target="_blank" title="在线JSON格式化" alt="在线JSON格式化">
                            <span>在线JSON格式化</span></a>
                        </li>
                        <li><a href="http://johnbin.cn/index/regexinfo/crypt/23W5667AH/xhrt/019fa4cd0954f064bf4dfd2bb44fdc61e9568286" target="_blank" title="正则表达式" alt="正则表达式">
                            <span>正则表达式</span></a>
                        </li>
                    </ul>
                </li>
            </ul>

            <div class="card text-center" style="display: none;">
                <div class="card-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <i class="feather icon-sunset f-40"></i>
                    <h6 class="mt-3">Help?</h6>
                    <p>Please contact us on our email for need any support</p>
                    <a href="index" target="_blank" class="btn btn-primary btn-sm text-white m-0">Support</a>
                </div>
            </div>

        </div>
    </div>
</nav>
<!-- [ Pre-loader ] End --><!-- [ navigation menu ] start -->

<!-- [ navigation menu ] end --><!-- [ Header ] start -->
<!-- [ navigation menu ] end --><!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
    <div class="m-header">
        <a class="mobile-menu" id="mobile-collapse" href="#"><span></span></a>
        <a href="http://blog.johnbin.cn/blog/index/index" class="b-brand">
            <!-- ========   change your logo hear   ============ -->
            <img src="/static/blog/static/picture/logo2.png" alt="" class="logo">
        </a>
        <a href="#" class="mob-toggler">
            <i class="feather icon-more-vertical"></i>
        </a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="http://blog.johnbin.cn/blog/index/index" class="pop-search"><i class="feather icon-search"></i></a>
                <form class="search-bar" id="searchform" method="get" role="search" action="/blog/index/search">
                    <input type="text" name="keywords" class="form-control border-0 shadow-none" placeholder="请输入关键词搜索">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </form>
            </li>
        </ul>
    </div>
</header>
<!-- [ Header ] end -->
<!-- [ Header ] end -->

<!-- [ Main Content ] start -->
<section class="pcoded-main-container" id="content">
    <div class="pcoded-content">
        <div class="row">
            <!--中部内容 -->
            
    <div class="col-md-8">
        <!-- [ breadcrumb ] start -->
        <ul class="breadcrumb" itemscope=""><a itemprop="breadcrumb" href="http://blog.johnbin.cn/blog/index/index">首页</a>  &nbsp;&nbsp;›&nbsp;&nbsp; <span class="current">Html</span></ul>                <!-- [ breadcrumb ] end -->
        <!-- [ list ] start -->
        <div class="list-cover list-rounded mb-3 mb-md-4 animated fadeIn">
            <div class="list-item list-overlay-content overlay-hover bg-dark">
                <div class="media media-21x9">
                    <div class="media-content" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/ffec66c9d30bf749c1c9043940822d12.jpg')"><div class="overlay"></div></div>
                </div>
                <div class="list-content p-3 p-md-4">
                    <div class="list-body">
                        <div class="d-flex align-items-center">
                            <div class="text-xl">Html</div>
                            <div class="flex-fill"></div>
                            <div class="text-light"> <i class="text-xl iconfont icon-file-text-line mr-1"></i><span class="text-xs ">0篇文章</span></div>
                        </div>
                        <div class="border-top border-white mt-2 mt-md-3 pt-2 pt-md-3"><div class="text-sm h-2x">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div>
                            <div class="border-theme bg-primary"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-home list-grid list-grid-padding div-black-745" id="list-home">
                        <div class="pagination" style="margin-left: 35%;"></div>
            <!--<div class="pagenavi text-center"><a href="http://blog.johnbin.cn/blog/index/index">加载更多</a></div>-->
        </div>
        <!-- [ list ] end -->
    </div>

            <!--中部内容 -->
            <div class="col-md-4">
                <!-- [ sidebar ] start -->
                <div class="theiaStickySidebar animated fadeIn" style="padding-top: 0px; padding-bottom: 1px; position: relative; transform: none;">
                    
                        <!--引入总览-->
                        <!--总览-->
<!--<div id="recommended_posts">-->
    <!--<div class="card card-sm widget Recommended_Posts cs_widget_author">-->
        <!--<div id="author_card-5" class="card-sm widget Author_Card">-->
            <!--<div class="widget-author-cover">-->
                <!--<div class="media media-2x1">-->
                    <!--<div class="media-content" style="background-image:url(/static/blog/static/image/default-cover.jpg)"></div>-->
                <!--</div>-->
                <!--<div class="widget-author-avatar">-->
                    <!--<div class="flex-avatar mx-2 w-80 border border-white border-2">-->
                        <!--<img src="/static/blog/static/picture/avatarx108.png" style="width:80px;height:80px;">-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="widget-author-meta text-center p-4">辄夜花泽-->
                <!--<div class="h6 mb-3 text-lg text-c-blue"></div>-->
                <!--<div class="desc text-xs mb-3 h-2x ">-->
                    <!--成功就是妥协与两难的坚持。-->
                    <!--<br>-->
                    <!--你的优秀不需要任何人来证明，要学会欣赏自己。-->
                    <!--&lt;!&ndash;<a target="_blank" href="javascript:;">&ndash;&gt;-->
                        <!--&lt;!&ndash;<img src="/static/blog/static/picture/GitHub-10-yellow-social_github.jpg" alt='github'>&ndash;&gt;-->
                    <!--&lt;!&ndash;</a>&ndash;&gt;-->
                    <!--&lt;!&ndash;<a href='javascript:;'>&ndash;&gt;-->
                        <!--&lt;!&ndash;<img src='/static/blog/static/picture/star-gray.jpg' alt='star'>&ndash;&gt;-->
                    <!--&lt;!&ndash;</a>&ndash;&gt;-->
                <!--</div>-->
                <!--<div class="row no-gutters text-center">-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">56</span>-->
                        <!--<small class="d-block text-xs text-muted">文章</small>-->
                    <!--</a>-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">27</span>-->
                        <!--<small class="d-block text-xs text-muted">评论</small>-->
                    <!--</a>-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">256729</span>-->
                        <!--<small class="d-block text-xs text-muted">浏览</small>-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->


<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts cs_widget_author">

        <style>
            .swiper-pagination-bullet{width: 5px;height: 5px;display: inline-block;background: #fdfdfd;opacity: .6;border-radius:10px;transition: all .2s ease-in-out;}
            .swiper-pagination-bullet-active{opacity: 1;background: #fff;width:25px}
            .swiper-button-prev{transition: all .2s ease-in-out;}
            .swiper-button-next{transition: all .2s ease-in-out;}
            .swiper-container:hover .swiper-button-prev{left:0;opacity:1}
            .swiper-container:hover .swiper-button-next{right:0;opacity:1}
            .swiper-container{width: 100%!important;height: 11rem;overflow: hidden;border-radius:3px 3px 0px 0px;}
            .swiper-content{border:0;margin-bottom: 0;background:rgba(255,255,255,.15);padding-bottom: 0;border-radius: 0}
            .swiper-pagination{text-align:right!important;}
            .swiper-container-horizontal>.swiper-pagination-bullets{bottom:0!important}
            .swiper-button-next, .swiper-button-prev{height:20px!important;margin-top:0px!important}
            .swiper-button-next{right:-15px;}
            .swiper-button-prev{left:-15px;}
            .swiper-slide{width:100%;height:100%;}
        </style>
        <div class="panel wrapper-md swiper-content">
            <div class="swiper-container border-radius swiper-container-horizontal">
                <div class="swiper-wrapper" style="transform: translate3d(-674px, 0px, 0px); transition-duration: 0ms;">
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/acbe8087fefc808245cc28f9d558c230.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="0">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/61688a450a5f9e7a15a953a073e7b672.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="1">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20200629/3631b434073594c371c3ef2a0d5244d7.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="2">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/a9af4df3f4bf35d4beca1958bcc071f5.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="3">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20200629/a5bca4253a799b8310628918a26e9ae1.png) 0% 0% / cover; width: 337px;" data-swiper-slide-index="4">
                        </div>
                                    </div>

                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div>-->


            </div>
        </div>
        <div id="author_card-5" class="card-sm widget Author_Card">
            <div class="widget-author-cover">
                <div class="widget-author-avatar" style="z-index:1;">
                    <div class="flex-avatar mx-2 w-80 border border-white border-2">
                        <img class="wid-80 hei80" src="/static/blog/static/picture/avatarx108.png">
                    </div>
                </div>
            </div>
            <div class="widget-author-meta text-center pt-4 pl-4 pr-4 pb-2">辄夜花泽                <div class="h6 mb-3 text-lg text-c-blue"></div>
                <div class="desc text-xs mb-3 h-2x ">
                    成功就是妥协与两难的坚持。
                    <br>
                    你的优秀不需要任何人来证明，要学会欣赏自己。
                    <!--<a target="_blank" href="javascript:;">-->
                    <!--<img src="/static/blog/static/picture/GitHub-10-yellow-social_github.jpg" alt='github'>-->
                    <!--</a>-->
                    <!--<a href='javascript:;'>-->
                    <!--<img src='/static/blog/static/picture/star-gray.jpg' alt='star'>-->
                    <!--</a>-->
                </div>
                <div class="row no-gutters text-center">
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">56</span>
                        <small class="d-block text-xs text-muted">文章</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">27</span>
                        <small class="d-block text-xs text-muted">评论</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md click_nums">2424</span>
                        <small class="d-block text-xs text-muted">点赞</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">93890</span>
                        <small class="d-block text-xs text-muted">浏览</small>
                    </a>
                </div>
            </div>
<!--            <hr class="b-wid-1 my-1" id="i_social_hr">-->
<!--            <div class="row no-gutters text-center pt-2 pb-2" id="i_social">-->
<!--                <a class="col" href="https://www.hankin.cn/" data-toggle="tooltip" data-placement="bottom" title="微信：wojiaohanhanjun">-->
<!--                    <i class="fa fa-weixin"></i>-->
<!--                </a>-->
<!--                <a class="col" href="http://weibo.com/u/3056395237" target="_blank" data-toggle="tooltip" data-placement="bottom" title="微博：Hankin-han">-->
<!--                    <i class="fa fa-weibo"></i>-->
<!--                </a>-->
<!--                <a class="col" href="https://wpa.qq.com/msgrd?v=3&amp;uin=315444473&amp;site=qq&amp;menu=yes" target="_blank" data-toggle="tooltip" data-placement="bottom" title="QQ：315444473">-->
<!--                    <i class="fa fa-qq"></i>-->
<!--                </a>-->
<!--                <a class="col" href="https://github.com/hankin-han" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Github：hankin-han">-->
<!--                    <i class="fa fa-github-alt"></i>-->
<!--                </a>-->
<!--            </div>-->
        </div>
    </div>
</div>
                        <!--引入联系方式-->
                        <!--联系方式-->
<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts cs_widget_link">
        <div class="card-header widget-header">加QQ群697360424<i class="bg-primary"></i>
        </div>
        <div class="textwidget">
            <a href="">
                <img src="http://blog.johnbin.cn/upload/admin/20200410/075f379c4d6bd6530b5d8bb28d79947e.jpg"></a>
        </div>
    </div>
</div>
                        <!--引入随机文章-->
                        <div id="recommended_posts">
    <div id="recommended_posts_1" class="card card-sm widget Recommended_Posts">
        <div class="card-header widget-header">随机文章<i class="bg-primary"></i>
        </div>
        <div class="card-body">
            <!-- 大图文章 -->
                        <div class="list-rounded my-n2">
                <div class="py-2">
                    <div class="list-item list-overlay-content">
                        <div class="media media-2x1">
                            <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/67984486" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190101/3c36ffe0a1b8ae9849e01efa3a615fd0.jpg')">
                                <span class="overlay"></span>
                            </a>
                        </div>
                        <div class="list-content">
                            <div class="list-body">
                                <a href="http://blog.johnbin.cn/blog/index/info/code/67984486" class="list-title h-2x">
                                    哪有那么多天才，都是千锤百炼出来的。                                </a>
                            </div>
                            <div class="list-footer">
                                <div class="text-muted text-xs">
                                    <time class="d-inline-block">6年前</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                        <!-- 小图文章 -->
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/14099923" class="list-title h-2x">
                                天赋决定你的上限，努力决定你的下限。                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">6年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/14099923" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190102/3cdbe9da5be7a93687801a2961badcd8.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/850326869" class="list-title h-2x">
                                一款简约的去水印工具                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">5年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/850326869" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/5b2875c045e3e413d08e1b6ec42e5bdd.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/938557107" class="list-title h-2x">
                                PHP教学视频                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">5年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/938557107" style="background-image:url('http://blog.johnbin.cn/upload/admin/20191022/d80b811b036aea07d48a372a6afaef70.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/160195140" class="list-title h-2x">
                                TP---跳转+传参总结                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">5年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/160195140" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190115/0a86d6c4f14ff598cb303cdb30dedbd7.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/52172434" class="list-title h-2x">
                                斯人若彩虹，遇见方知有。                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">6年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/52172434" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190101/5dde387ba808e58926b1f8dc145e41ff.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/388231416" class="list-title h-2x">
                                经典情人节英文字体素材                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">5年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/388231416" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/28abcf0775d23ba68c41ac65914ced96.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/106225866" class="list-title h-2x">
                                点缀DIV，加上边框阴影，以及背景透明                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">5年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/106225866" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190115/e30b9f8ab6f90e94b58185493a0ea38b.jpg')"></a>
                    </div>
                </div>
            </div>
                    </div>
    </div>
</div>
                        <!--引入tags标签-->
                        <!--标签-->
<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts widget_tag_cloud">
        <div class="card-header widget-header">tags<i class="bg-primary"></i></div>
        <div class="tagcloud">
                            <a href="http://blog.johnbin.cn/blog/index/category/code/777192611" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="视频">视频</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/734137683" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Laravel">Laravel</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/701176514" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="工具">工具</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/45917434" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="PHP">PHP</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/20125912" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Html">Html</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/34533430" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Ajax">Ajax</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/52841698" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Javascript">Javascript</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70656814" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Linux">Linux</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/66362692" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Mysql">Mysql</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70878573" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="小程序">小程序</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/97688234" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Api">Api</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/80998220" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Ecshop">Ecshop</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/267109849" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Web">Web</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/745114309" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Jquery">Jquery</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/630126983" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="ThinkPHP">ThinkPHP</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/628147134" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Yii">Yii</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/790151821" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="辄夜花泽">辄夜花泽</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/618169803" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="手册">手册</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/662183728" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="源码">源码</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/440202696" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="模板">模板</a>
                    </div>
    </div>
</div>
                    
                </div>
             <!-- [ sidebar ] end -->
             </div>
        </div>
    </div>
    <!--引入copyright-->
    <!-- [ copyright ] start -->
<footer class="footer card py-3 py-lg-3">
    <div class="container">
        <div class="d-md-flex flex-md-fill align-items-md-center">
            <div class="d-md-flex flex-md-column">
                <div class="footer-copyright text-xs px-3">
                    Copyright © 2021 <a href="http://blog.johnbin.cn/blog/index/index" title="辄夜花泽" rel="home">辄夜花泽技术博客</a>. Design of <a href="http://blog.johnbin.cn/blog/index/index" title="辄夜花泽" target="_blank">Chasel</a>
                </div>
            </div>
            <div class="flex-md-fill"></div>
        </div>
    </div>
</footer>
<!-- [ copyright ] end -->
    <!--引入tab按钮-->
    <!--tab按钮-->
<div class="mobile-btn clearfix">
    <div class="menu">
        <div class="bt-name"><a href="http://blog.johnbin.cn/blog/index/index"><i class="feather icon-home"></i>主页</a></div>
    </div>
    <div class="menu">
        <div class="bt-name"><i class="feather icon-file"></i>导航</div>
        <div class="sanjiao"></div>
        <div class="new-sub">
            <ul>
                <div>
                    <li class="page_item page-item-1423"><a href="http://blog.johnbin.cn/blog/index/topics">专题</a></li>
                    <li class="page_item page-item-1429"><a href="http://blog.johnbin.cn/blog/index/message">留言</a></li>
                </div>
            </ul>
        </div>
    </div>
    <div class="menu">
        <div class="bt-name"><a href="javascript:;"><i class="feather icon-user"></i>博主</a></div>
        <div class="new-sub user-info">
            <div class="bg-dark-overlay pt-4 pt-md-5 bg-relative">
                <div class="bg" style="background-image: url(/static/blog/static/picture/avatar.png)"></div>
                <div class="container-box">
                    <div class="d-flex flex-fill flex-column flex-md-row align-items-md-center py-md-5">
                        <div class="mb-3 mb-md-0">
                            <div class="flex-avatar mx-2 w-80 border border-white border-2 ">
                                <img alt='辄夜花泽' src='/static/blog/static/picture/avatar.png' class='avatar avatar-80 photo wid-80 hei-80'>
                            </div>
                            <div class="name text-lg text-left">阿泽泽                                <i class="cut"></i>
                                <span class="badge badge-rank badge-primary text-xs mx-1">博主</span></div>
                            <div class="desc text-sm mt-2 clear-lineheight text-left">纸上得来终觉浅,绝知此事要躬行~</div>
                        </div>
                        <div class="text-white mx-md-4 flex-fill">
                            <div class="data text-lg mt-2 text-left clear-lineheight">
                                        <span class="mr-3">
                                            <a href="" class="">
                                                <span class="font-theme text-lg text-xl text-white">56</span>
                                                <small class=" text-xs text-light mx-1">文章</small></a>
                                        </span>
                                <span class="mr-3">
                                            <a href="" class="">
                                                <span class="font-theme text-lg text-xl text-white">27</span>
                                                <small class=" text-xs text-light mx-1">评论</small></a>
                                        </span>
                                <span class="mr-3">
                                            <a class="">
                                                <span class="font-theme text-lg text-xl text-white">93890</span>
                                                <small class=" text-xs text-light mx-1">浏览</small></a>
                                        </span>
                            </div>
                            <div style="margin-top:.2rem;padding-bottom: .2rem;border-bottom: solid .01rem rgba(255,255,255,.15);"></div>
                        </div>
                    </div>
                </div>
                <div class="user-tab clearfix">
                    <div class="tab-list">
                        <div class="tab-name"><a class="active" id="Blog" href="javascript:;">博客详情</a></div>
                    </div>
                    <div class="tab-list">
                        <div class="tab-name"><a id="Blogger" href="javascript:;">博主详情</a></div>
                    </div>
                </div>
                <div class="user-tab-body">

                </div>
            </div>
        </div>
    </div>
</div>
</section>
<!--引入尾部-->
<!-- [ Main Content ] end --><!--定义全局变量-->
<script type="text/javascript" src="/static/blog/static/js/jweixin-1.4.0.js?version=1726123286"></script>
<script type="text/javascript">
    window.THEME_URL = 'http://blog.johnbin.cn/static/blog/static';
    window.ENCODE_URI_COMPONENT_TITLE = document.title;
    //自定义二维码内容
    window.ENCODE_URI_COMPONENT_LINK = this.location.href;
    window.ENCODE_URI_COMPONENT_IMAGE = 'http://blog.johnbin.cn/static/blog/static/image/shortcut_icon.png';
    window.ENCODE_URI_COMPONENT_DESC = '辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术';
    window.ENCODE_URI_COMPONENT_SITE = '辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术';
//    window.APPID = 'wxffb0fb7d45027810';
//    window.TIMESTAMP = '1573052310';
//    window.NONCESTR = 'XEwJ4siahSehOnR';
//    window.SIGNATURE = 'b53ebb56b4cd487c6d9aae5c3880281644e81c83';
//    window.IS_PAGE_SINGLE = 0;
</script>
<script type="text/javascript">
    wxConfig = {
        title : document.title,
        desc : window.ENCODE_URI_COMPONENT_DESC,
        link : window.ENCODE_URI_COMPONENT_LINK,
        imgUrl : window.ENCODE_URI_COMPONENT_IMAGE,
    };
    playerConfig = {
    autoplay : true,
    ids : 2693957935,
    }
</script>
<script type="text/javascript" src="/static/blog/static/js/wxShare.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.cookie.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/bootstrap.min.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/menu-setting.min.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/clipboard.min.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/main.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/pjax.js?version=1726123286"></script>
<script type="text/javascript" src="/static/blog/static/js/swiper.min.js?version=1726123286"></script>
<!-- 分享插件 start-->
<div id="cz-leftside-share"></div>
<script type="text/javascript" src="/static/blog/static/js/jquery.share.min.js?version=1726123286"></script>
<!-- 分享插件 end-->
<!-- 音乐播放器 start-->
<div class="aplayer-footer"><div class="ap-f" id="ap-f"></div></div>
<link rel="stylesheet" type="text/css" href="/static/blog/static/css/play.css?version=1726123286">
<script src="/static/blog/static/js/aplayer.min.js?version=1726123286"></script>
<!-- 音乐播放器 start-->
<script type='text/javascript' src='/static/blog/static/js/jquery.infinitescroll.min.js?version=1726123286'></script>
<script type='text/javascript' src='/static/blog/static/js/wp-embed.min-4.9.4.js?version=1726123286'></script>
<!--弹窗-->
<script type='text/javascript' src='/static/blog/static/js/sweetalert.min.js?version=1726123286'></script>
<script>
    //swiper轮播
    var mySwiper = new Swiper('.swiper-container',{
        speed:2500,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            waitForTransition: false,
        },
        loop : true,
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },

        //s3
        pagination: '.swiper-pagination',
        paginationClickable: true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        // pagination:{
        //     el: '.swiper-pagination',
        //     hideOnClick :true,
        // },
    })


//    var text=document.title;//获得页面的标题
//    var timerID;//定时器
//    function newtext() {
//        clearTimeout(timerID);
//        document.title=text.substring(1,text.length)+text.substring(0,1);//截取字符重新赋值给title
//        text=document.title.substring(0,text.length);
//        timerID = setTimeout("newtext()", 500);
//    }
//    window.onload=function(){
//        newtext();
//    }
</script>

</body>
</html>