Forráskód Böngészése

完成 登陆页 基础样式

LGB 8 éve
szülő
commit
52038a8f04

BIN
public/scr/components/signin/icon1.PNG


BIN
public/scr/components/signin/icon2.PNG


+ 123 - 0
public/scr/components/signin/signin.css

@@ -0,0 +1,123 @@
+*{margin: 0;padding: 0;}
+a{text-decoration: none;}
+ul,li{list-style: none;}
+body{font-size: 14px;font-family: "微软雅黑";}
+.top{
+    width: 100%;
+    height: 64px;
+    background-color: #2196F3;
+    margin: 0 auto;
+    float: left;
+    }
+.top-title{
+    font-size: 24px;
+    font-weight: 400;
+    color: white;
+    line-height: 64px;
+    margin-left: 16px;
+    float: left;
+    }
+.top-btn1{
+    position: relative;
+    left: 63%;
+    top: 14px;
+    width: 88px;
+    height: 36px;
+    padding: 0 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: white;
+    line-height: 33px;
+    text-align: center;
+    }
+.top-btn2{
+    position: relative;
+    left: 66%;
+    top: 14px;
+    width: 88px;
+    height: 36px;
+    padding: 0 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: white;
+    line-height: 33px;
+    text-align: center;
+    }
+.content{
+    width: 100%;
+    height: 1000px;
+}
+.content-title{
+    font-size: 34px;
+    font-weight: 400;
+    color: black;
+    font-family: sans-serif;
+    padding-left: 19.66%;
+    padding-top: 135px;
+    margin: 0 auto
+}
+.content1{
+    position: relative;
+    top:26px;
+    left: 19.66%;
+    width: 60%;
+    height: 395px;
+    border: rgb(222,222,222) solid 1px;
+}
+.content1-kuang{
+    width: 49%;
+    height: 36px;
+    margin: 0 auto;
+    margin-top: 50px;
+}
+.content1-text1{
+    width: 86%;
+    height: 33px;
+    border: 0px;
+    border-bottom: rgb(222,222,222) solid 1px;
+    float: right;
+    outline: none;
+}
+.content1-text2{
+    width: 70%;
+    height: 33px;
+    border: 0px;
+    border-bottom: rgb(222,222,222) solid 1px;
+    float: right;
+    outline: none;
+}
+.content1-tishi{
+    font-size: 15px;
+    color: #40c4ff;
+    line-height: 80px;
+    margin-left: 26%;
+    }
+.content1-button{
+    width: 49%;
+    height: 36px;
+    border: 0px;
+    background-color: #40c4ff;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    margin-right: 203px;
+    float: right;
+}
+.buttom{
+    width: 100%;
+    height: 87px;
+    background-color: #424242;
+    margin-top: 40%
+}
+.buttom-text{
+    font-size: 15px;
+    color: #9e9e9e;
+    line-height: 83.25px;
+    text-align: center;
+}
+::-webkit-input-placeholder{
+    font-size: 16px;
+    font-family: 微软雅黑;
+    color: #bdbdbd;
+    }

+ 40 - 0
public/scr/components/signin/signin.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="Author" content=" ">
+    <title>Document</title>
+    <link href="1.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <div class="top">
+        <a class="top-title" href="#">CloudSQL Admin Panel</a>
+        <a class="top-btn1" href="#" id="btn1">登陆</a>
+        <a class="top-btn2" href="#">注册</a>
+    </div>
+    <div class="content">
+        <h2 class="content-title">用户登录</h2>
+        <div class="content1">
+            <ul>
+                <li class="content1-kuang">
+                    <img src="icon1.PNG">
+                    <input class="content1-text1" placeholder="用户名/邮箱">
+                </li>
+                <li class="content1-kuang">
+                    <img src="icon2.PNG">
+                    <input class="content1-text1"  placeholder="密码">
+                </li>
+                <li class="content1-kuang">
+                    <img src="http://admin.cloudsql.1473.cn/v1/captcha?1527505813811">
+                    <input class="content1-text2"  placeholder="验证码">
+                </li>
+            </ul>
+            <a class="content1-tishi" href="#">还没有账户,点击注册</a>
+            <button class="content1-button">登陆</button>
+        </div>
+        <div class="buttom">
+            <p class="buttom-text">Copyright @ 2016 - 2017 CloudSQL All rights reserved. </p>
+        </div>
+    </div>
+</body>
+</html>

+ 1 - 0
public/scr/components/signin/signin.js

@@ -0,0 +1 @@
+