网页制作 Html制作简单而漂亮的登录页面

先来看看样子。

html源码：

XML/HTML Code复制内容到剪贴板
  1. >
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Logintitle>
  6. <linkrel="stylesheet"type="text/css"href="Login.css"/>
  7. head>
  8. <body>
  9. <divid="login">
  10. <h1>Loginh1>
  11. <formmethod="post">
  12. <inputtype="text"required="required"placeholder="用户名"name="u">input>
  13. <inputtype="password"required="required"placeholder="密码"name="p">input>
  14. <buttonclass="but"type="submit">登录button>
  15. form>
  16. div>
  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:'OpenSans',sans-serif;
  11. margin:0;
  12. background-color:#4A374A;
  13. }
  14. #login{
  15. position:absolute;
  16. top:50%;
  17. left:50%;
  18. margin:-150px00-150px;
  19. width:300px;
  20. height:300px;
  21. }
  22. #loginh1{
  23. color:#fff;
  24. text-shadow:0010px;
  25. letter-spacing:1px;
  26. text-align:center;
  27. }
  28. h1{
  29. font-size:2em;
  30. margin:0.67em0;
  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:1px1px1px;
  41. border-top:1pxsolid#312E3D;
  42. border-left:1pxsolid#312E3D;
  43. border-right:1pxsolid#312E3D;
  44. border-bottom:1pxsolid#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:1pxsolid#3762bc;
  54. color:#fff;
  55. padding:9px14px;
  56. font-size:15px;
  57. line-height:normal;
  58. border-radius:5px;
  59. margin:0;
  60. }

总结：

复制代码
代码如下:

placeholder="用户名"的作用:占位符

以上就是本文的全部内容，希望对大家的学习有所帮助。

文章来源：https://www.jb51.net/web/458871.html

百度网盘搜索
www.ijzcn.cn
阿哇教育
www.awaedu.com
作文哥
www.zuowenge.cn
搜码吧
www.somanba.cn
# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟