前端登录界面设计

具体效果是这样：

1.html文件创建

新建一个html文档

输入基本结构

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单登录提交前端设计</title>
    </head>
    <body>

    </body>
</html>

2.插入表单

插入<form>来插入几个表单：

  • 用户名
  • 密码
  • 提交
  • 重置
    用<div>划为一块命名为biaodan
    吧四个部分分别命名
<div id="biaodan">
  <form name="input" action="" method="post">
    <!--用户名-->
    <input type="text" value="name" name="name" id="name">
    <br>
    <br>
    <!--密码-->
    <input type="$#password" value="password" name="password" id="passwork">
    <br>
    <br>
    <!--提交-->
    <input type="submit" value="确定" id="quedinganniu">
    <!--重置-->
    <input type="reset" name="button" id="chongzhianniu" value="重置">
  </form>
</div>

大概现在效果就是这样：

接下来使用CSS进行一些美化

3.美化

在head部分插入<style>来进行一些美化

<style>

#biaodan { 
    text-align: center; 
    border: #4CAF50;    
    border-radius: 4px；

}
#quedinganniu {
    background-color: #4CAF50;  
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
    margin-right:30px
}
#chongzhianniu {
    background-color: #4CAF50;
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
}
#name {
    border-radius: 4px;
    width: 400px;
    height: 30px;
}
#passwork {
    border-radius: 4px;
    width: 400px;
    height: 30px;
    }
</style>

设定

  • 表单的输入框边角弧度、长高
  • 按钮颜色、边框弧度、边框颜色、长高
  • 按钮距离位置

最后效果就是这样：

4.完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单登录提交前端设计</title>
<style>
#biaodan {
    text-align: center;
    border: #4CAF50;
    border-radius: 4px；

}
#quedinganniu {
    background-color: #4CAF50;
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
    margin-right:30px
}
#chongzhianniu {
    background-color: #4CAF50;
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
}
#name {
    border-radius: 4px;
    width: 400px;
    height: 30px;
}
#passwork {
    border-radius: 4px;
    width: 400px;
    height: 30px;
    }
</style>
<meta name="author" content="kamuxiy">
</head>

<body id="body">
<div id="biaodan">
  <form name="input" action="" method="post">
    <!--名字-->
    <input type="text" value="name" name="name" id="name">
    <br>
    <br>
    <!--密码-->
    <input type="$#password" value="password" name="password" id="passwork">
    <br>
    <br>
    <!--提交-->
    <input type="submit" value="确定" id="quedinganniu">

    <!--重置-->
    <input type="reset" name="button" id="chongzhianniu" value="重置">
  </form>
</div>
</body>
</html>
赏

一只小白鸽