<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title>首页</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="../static/md_css/monokai.css">
{#    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">#}
    <!--导入css-->
    <link rel="stylesheet" href="../static/common/common.css">
     <link rel="stylesheet" href="../static/common/zhan.css">
{#    <link rel="stylesheet" href="../static/common/jquery.pagination.css">#}
<!--     引入vuejs -->
    <script type="text/javascript" src="../static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
</head>
<style>
		body{
			background-image:url("../static/img/9.jpg") ;
            background-size: 1920px,1001.19px;

		}
       .loader {
           animation-name:animate;
    position: absolute;
           left:45%;
    top:30%;
           box-shadow: 0 0 10px blue;
    width: 200px;
    height: 200px;
    color: #fff;
    /* 圆角形成圆形 */
    border-radius: 50%;
    /* 实现顶部圆弧 */
    border-top: 5px solid  cornflowerblue;

    border-bottom: 5px solid transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    /* 增加动画 */
    animation: animate 1s linear infinite;
}

.loader::after, .loader::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: -5px;
    border-radius: 50%;
    border-bottom: 4px solid transparent;
    /* background-color: wheat; */
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.navbar navbar-expand-lg navbar-dark bg-dark{
    opacity: 0;
}

	</style>
<body>



<div id="app">
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container">
        <!-- 导航栏商标 -->
        <div>
            <a class="navbar-brand" href="./index.html">个人博客</a>
        </div>
        <!-- 分类 -->
        <div class="collapse navbar-collapse">
            <div>
                <ul class="nav navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link mr-2" href="#">Python</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-2" href="#">Java</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-2" href="#">C</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mr-2" href="#">C++</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--登录/个人中心-->
    <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown" v-if="is_login">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">admin</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu">
                        <a class="dropdown-item" href="../static/write_blog.html">写文章</a>
                        <a class="dropdown-item" href='../static/center.html'>个人信息</a>
                        <a class="dropdown-item" href='#'>退出登录</a>
                    </div>
                </li>
                <!-- 如果用户未登录，则显示登录按钮 -->
                <li class="nav-item" v-else>
                    <a class="nav-link" href="login.html">登录</a>
                </li>
            </ul>
        </div>
</nav>

<!-- content -->
 <div class="loader">

    </div>
    <div class="main"
    ></div>
  <div class="tupain"
    ></div>

    <div class="blog_1 ">
         <a class="blog_text" href='../static/wenzhang.html'>博客</a>

    </div>
</div>



</div>

<!-- 引入js -->
<script type="text/javascript" src="../static/js/host.js"></script>
<script type="text/javascript" src="../static/js/common.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
<script type="text/javascript" src="../static/js/jquery.pagination.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#pagination').pagination({
            currentPage: 15,
            totalPage: 30,
            callback:function (current) {

                location.href = '/';
            }
        })
    });
</script>
</body>
</html>