当前位置：网站首页>Can amaze your login page

Can amaze your login page

2022-04-22 18:54:00 【Silent one】

Insert picture description here

Personal blog ： Silent one ლ(´ڡ`ლ) delicious
Effect link ：http://tingfeng77521.xyz/1.html

design sketch

Insert picture description here

All the code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    <title> Silent one </title>
    <link rel="icon" type="text/css" href="1.gif" />
    <style> * {
       margin: 0; padding: 0; } html {
       height: 100%; } body {
       height: 100%; } .overall {
       height: 100%; background-image: linear-gradient(to right, #CFF, #FCF); overflow:auto; } .frame {
       background:#FFF; width:500px; height:800px; border-radius:20px; padding:0px 50px; position:relative; margin:80px auto; } .login {
       width: 460px; height: 75px; margin-left: 20px; float: left; margin-top: 50px; text-align: center; font-size: 54px; color: #000; font-family: Tahoma, Geneva, sans-serif; } .box {
       width:480px; height:600px; float:left; margin-left:10px; margin-top:20px; overflow:hidden; } .id {
       width:400px; height:50px; margin-left:40px; margin-top:40px; border-bottom:1px solid #333; font-size:18px; border: 0; border-bottom: 1px solid rgb(128, 125, 125); outline:none; display:block; } .password {
       width:400px; height:50px; margin-left:40px; margin-top:40px; margin-bottom:40px; border-bottom:1px solid #333; font-size:18px; border: 0; border-bottom: 1px solid rgb(128, 125, 125); outline:none; display:block; } .logon {
       width:420px; height:50px; border-radius:20px; display:block; background-image: linear-gradient(to right, #CFF, #FCF); font-size:24px; padding-top:13px; text-align:center; text-decoration:none; margin-left:35px; margin-top:40px; margin-bottom:40px; } .a {
       width:420px; height:50px; border-radius:20px; display:block; background-image: linear-gradient(to right, #FCC, #9FC); font-size:24px; padding-top:13px; text-align:center; margin-left:35px; } </style>
</head>
<body>
    <div class="overall">
         <div class="frame">
              <div class="login">Hello</div>
              <div class="box">
                   <input name="Account number" type="text" class="id" placeholder="Account number" size="3" maxlength="8">
                   <input name="Password" type="text" class="password" placeholder="Password" size="3" maxlength="12">
                   <a class="logon" href="https://blog.csdn.net/weixin_59064057?spm=1000.2115.3001.5343">Logon</a>
                   <a class="a">Don' t worry,being loaded!</a>
              </div>
              </div>
         </div>
   </div>
    </div>
</body>
</html>

Important grammar

1.meta name =“viewport” content = “width = device-width, intial-scale = 1”
width and height Refers to the size of the browser viewport . It can be done by documentElement clientwidth obtain .
Be careful ：

Not every computer will run full screen , Her or his browser , But the mobile browser will fill the available screen .

*{ margin:0;padding:0} The role of ：
*{margin:0;padding:0} The role of is reset（ repeat ）. Browser default mode , If you agree with the browser style, it has a simple and crude effect . This thing is called wildcard , Used to match elements on the page .

matters needing attention

Here's an explanation , The last login button is the hyperlink I use directly , Because I basically can't use , We just need to change the last login button .

版权声明
本文为[Silent one]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204221849404473.html