首页 > 网页制作  > HTML/Xhtml

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

admin HTML/Xhtml 2021-10-02 22:34:19 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

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/HTMLXhtml/248279.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码