logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 冒险的K 2021-11-13

先来看看样子。

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

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 冒险的K > 《应用文》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多