diff --git a/css/login.css b/css/login.css
new file mode 100644
index 0000000..8ab7e98
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,71 @@
+body {
+    background: url("../images/bg.png") no-repeat center center fixed ;
+    background-size: cover;
+}
+
+.login-box {
+    width: 300px;
+    height: 300px;
+    border: 1px solid #1a312c;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -150px;
+    margin-top: -150px;
+    border-radius: 5px;
+}
+
+.head {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    position: absolute;
+    top: -96px;
+    left: 50%;
+    margin-left: -50px;
+    background: url("../images/ok.png");
+    background-size: cover;
+}
+
+.input-box {
+    margin: 10px 10px 10px 10px;
+}
+
+.input-box input {
+    margin-top: 20px;
+    border-radius: 5px;
+}
+
+.input-box input[type="submit"] {
+    background-color: #189F92;
+    width: 100%;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: #fff;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    font-size: 18px;
+}
+
+.input-box .remember-me {
+    margin-top: 20px;
+}
+
+.input-box .remember-me .layui-form-switch {
+    margin-top: 0;
+}
+
+.input-box .oauth {
+    margin-top: 20px;
+}
+
+.input-box .oauth i {
+    cursor: pointer;
+    font-size: 28px;
+}
+
+.copyright {
+    margin: 10px 10px 10px 10px;
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/login.html b/login.html
index 4473060..c7876e0 100644
--- a/login.html
+++ b/login.html
@@ -10,79 +10,7 @@
     <link rel="stylesheet" href="lib/layui/css/layui.css">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_y9sqpclnwsd.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css"/>
-    <style>
-        body {
-            background: url("images/bg.png") no-repeat center center fixed ;
-            background-size: cover;
-        }
-
-        .login-box {
-            width: 300px;
-            height: 300px;
-            border: 1px solid #1a312c;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            margin-left: -150px;
-            margin-top: -150px;
-            border-radius: 5px;
-        }
-
-        .head {
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            position: absolute;
-            top: -96px;
-            left: 50%;
-            margin-left: -50px;
-            background: url("images/ok.png");
-            background-size: cover;
-        }
-
-        .input-box {
-            margin: 10px 10px 10px 10px;
-        }
-
-        .input-box input {
-            margin-top: 20px;
-            border-radius: 5px;
-        }
-
-        .input-box input[type="submit"] {
-            background-color: #189F92;
-            width: 100%;
-            border: none;
-            outline: none;
-            cursor: pointer;
-            color: #fff;
-            padding-top: 8px;
-            padding-bottom: 8px;
-            font-size: 18px;
-        }
-
-        .input-box .remember-me {
-            margin-top: 20px;
-        }
-
-        .input-box .remember-me .layui-form-switch {
-            margin-top: 0;
-        }
-
-        .input-box .oauth {
-            margin-top: 20px;
-        }
-
-        .input-box .oauth i {
-            cursor: pointer;
-            font-size: 28px;
-        }
-
-        .copyright {
-            margin: 10px 10px 10px 10px;
-            font-size: 12px;
-        }
-    </style>
+    <link rel="stylesheet" href="css/login.css"/>
 </head>
 <body>
     <div class="login-box animated rotateIn">
