Html制作简单⽽漂亮的登录页⾯先来看看样⼦。
html源码：
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.    <meta charset="UTF-8">
5.    <title>Login</title>
6.    <link rel="stylesheet" type="text/css" href="Login.css"/>
7. </head>
8. <body>
9.    <div id="login">
10.        <h1>Login</h1>
11.        <form method="post">
12.            <input type="text" required="required" placeholder="⽤户名" name="u"></input>
13.            <input type="password" required="required" placeholder="密码" name="p"></input>
14.            <button class="but" type="submit">登录</button>
15.        </form>
16.    </div>html制作一个网页
17. </body>
18. </html>
css代码：
CSS Code复制内容到剪贴板
1. html{
2.    width: 100%;
3.    height: 100%;
4.    overflow: hidden;
5.    font-style: sans-serif;
6. }
7. body{
8.    width: 100%;
9.    height: 100%;
10.    font-family: 'Open Sans',sans-serif;
11.    margin: 0;
12.    background-color: #4A374A;
13. }
14. #login{
15.    position: absolute;
16.    top: 50%;
17.    left:50%;
18.    margin: -150px 0 0 -150px;
19.    width: 300px;
20.    height: 300px;
21. }
22. #login h1{
23.    color: #fff;
24.    text-shadow:0 0 10px;
25.    letter-spacing: 1px;
26.    text-align: center;
27. }
28. h1{
29.    font-size: 2em;
30.    margin: 0.67em 0;
31. }
32. input{
33.    width: 278px;
34.    height: 18px;
35.    margin-bottom: 10px;
36.    outline: none;
37.    padding: 10px;
38.    font-size: 13px;
39.    color: #fff;
40.    text-shadow:1px 1px 1px;
41.    border-top: 1px solid #312E3D;
42.    border-left: 1px solid #312E3D;
43.    border-right: 1px solid #312E3D;
44.    border-bottom: 1px solid #56536A;
45.    border-radius: 4px;
46.    background-color: #2D2D3F;
47. }
48. .but{
49.    width: 300px;
50.    min-height: 20px;
51.    display: block;
52.    background-color: #4a77d4;
53.    border: 1px solid #3762bc;
54.    color: #fff;
55.    padding: 9px 14px;
56.    font-size: 15px;
57.    line-height: normal;
58.    border-radius: 5px;
59.    margin: 0;
60. }
总结：
复制代码
代码如下:
<input type="text" required="required" **placeholder="⽤户名"** name="u"></input>
<input type="password" required="required" **placeholder="密码"** name="p"></input> placeholder="⽤户名"的作⽤：占位符
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。