完成 注册页 静态样式

public/scr/signup/1.css

@@ -0,0 +1,185 @@
+    *{margin: 0;padding: 0;}
+        a{text-decoration: none;}
+        ul,li{list-style: none;}
+        body{font-size: 14px;font-family: "微软雅黑";}
+        .header{
+            display: flex;
+            width: 100%;
+            height: 64px;
+            background: #2196f3;
+        }
+        .header-title_row {
+            display: flex;
+            align-items: center;
+            flex: 1;
+        }
+        .header-title_row span {
+            margin: 0 16px;
+            font-size: 23px;
+            color: white;
+        }
+        .header-btn_row {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            flex: 2;
+        }
+        .header-btn-col {
+            position: relative;
+            display: inline-block;
+            min-width: 88px;
+            height: 36px;
+            box-sizing: border-box;
+            padding: 0 16px;
+            margin: 0;
+            overflow: hidden;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 36px;
+            color: #fff;
+            text-align: center;
+            text-decoration: none;
+            text-transform: uppercase;
+            letter-spacing: .04em;
+            white-space: nowrap;
+            vertical-align: middle;
+            cursor: pointer;
+        }
+
+        .body{
+            height: 590px;
+            width: 870px;
+            margin: auto;
+            margin-top: 140px;
+
+        }
+        .ziti1{
+            font-size: 33px;
+        }
+        .content{
+            height: 511px;
+            width: 867px;
+            border: 1px solid black;
+            margin-top: 27px;
+            display: flex;
+        }
+        .content_row1{
+
+            flex:1;
+
+        }
+        .content_row2{
+            flex: 2;
+            display: flex;
+            justify-content: center;
+
+        }
+        .content_row3{
+
+            flex:1;
+        }
+         .content_content{
+          height:500px;
+          width:399px;
+
+       }
+        .rectangle{
+           height: 60px;
+           width: 486px;
+           margin-top: 29px;
+           /* margin-left:134px; */
+
+       }
+       .picture{
+           float: left;
+           height: 25px;
+           width: 25px;
+           color: #873939;
+           margin-top: 16px;
+       }
+       .picture1{
+           height: 45px;
+           width: 66px;
+           float: left;
+           margin-top: 7px;
+       }
+       .input{
+           float: left;
+           height: 37px;
+           width: 340px;
+           border: none;
+           margin-top: 12px;
+           margin-left: 26px;
+           border-bottom: 1px solid black;
+       }
+       .input1{
+           float: left;
+           height: 37px;
+           width: 301px;
+           border: none;
+           margin-top: 12px;
+           margin-left: 26px;
+           border-bottom: 1px solid black;
+       }
+        .input1:hover{
+           border-bottom: 1px solid #3ed3ff;
+       }
+       .input:hover{
+           border-bottom: 1px solid #3ed3ff;
+       }
+       .ziti2{
+           color: #40c4ff;
+           font-size: 15px;
+           /* margin-left: 134px; */
+           margin-top: 27px;
+       }
+       .button{
+           height: 40px;
+           width: 399px;
+           margin-top: 33px;
+           background: #40c4ff;
+           /* margin-left: 134px; */
+       }
+       .ziti3{
+           margin-top: 9px;
+           margin-left: 187px;
+           position: absolute;
+       }
+       .underline{
+           width:133px;
+           margin-left:234px;
+           border:1px solid #40c4ff ;
+           display: none;
+       }
+
+
+        .bottom{
+            width:100%;
+            height:80px;
+            background:#424242;
+            margin-top: 45px;
+            display: flex;
+
+        }
+
+        .bottom_row1{
+            flex:3;
+
+        }
+          .bottom_row2{
+            flex: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+          .bottom_row3{
+            flex:3;
+
+        }
+        .bottom_row2 span{
+            color: #9e9e9e;
+            line-height: 93px;
+            margin: 8px;
+
+        }
+

public/scr/signup/注册.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="Author" content=" ">
+    <title>Document</title>
+</head>
+<link rel='stylesheet' href='1.css'>
+<body>
+<div class='header'>
+    <div class="header-title_row">
+        <span>CloudSQL Admin Panel</span>
+    </div>
+    <div class="header-btn_row">
+        <div class="header-btn-col">登录</div>
+        <div class="header-btn-col">注册</div>
+    </div>
+
+</div>
+<div class='body'>
+     <div class='ziti1'>用户注册</div>
+  <div class='content'>
+    <div class='content_row1'></div>
+    <div class='content_row2'>
+      <div class='content_content'>
+         <div class='rectangle'>
+           <img class='picture' src='1.png'>
+           <input class='input' style='outline:none;' type='text' placeholder='用户名/邮箱'>
+               </div>
+               <div class='rectangle'>
+           <img class='picture' src='2.png'>
+           <input class='input' style='outline:none;' type='text' placeholder='密码'>
+               </div>
+               <div class='rectangle'>
+           <img class='picture' src='3.png'>
+           <input class='input' style='outline:none;' type='text' placeholder='邀请码'>
+               </div>
+               <div class='rectangle'>
+           <img src='http://admin.cloudsql.1473.cn/v1/captcha?1527510514585' class='picture1'>
+           <input class='input1' style='outline:none;' type='text' placeholder='验证码'>
+               </div>
+               <div id='box'>
+                   <a href=''><div class='ziti2' id='ziti2'>已有户账，点击登陆</div></a>
+                   <div class='underline' id='underline'></div>
+               </div>
+               <div class='button'><p class='ziti3'>注册</p></div>
+             </div>
+        </div>
+    <div class='content_row3'></div>
+
+  </div>
+</div>
+
+<div class='bottom'>
+    <div class='bottom_row1'></div>
+    <div class='bottom_row2'>
+        <span>Copyright © 2016 - 2017 CloudSQL All rights reserved. </span>
+    </div>
+    <div class='bottom_row3'></div>
+</div>
+</body>
+<!-- <script>
+    function underline(){
+        var a=document.getElementById('underline');
+
+        if(a){
+            a.style.display='block';
+
+
+        }
+    }
+    function underline1(){
+         var a=document.getElementById('underline');
+        if(a){
+            a.style.display='none';
+
+        }
+    }
+document.getElementById('ziti2').onmouseover=underline;
+document.getElementById('ziti2').onmouseout=underline1;
+</script> -->
+</html>