test.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>个人资料</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. .header {
  14. background-color: #f1f1f1;
  15. padding: 20px;
  16. text-align: center;
  17. }
  18. .content {
  19. padding: 20px;
  20. }
  21. .section {
  22. margin-bottom: 20px;
  23. }
  24. .section-title {
  25. font-weight: bold;
  26. margin-bottom: 10px;
  27. }
  28. .form-control {
  29. display: flex;
  30. justify-content: space-between;
  31. margin-bottom: 10px;
  32. }
  33. .form-control label {
  34. font-weight: bold;
  35. }
  36. .form-control input[type="text"],
  37. .form-control input[type="password"] {
  38. flex-grow: 1;
  39. margin-left: 10px;
  40. }
  41. .button {
  42. background-color: #4CAF50;
  43. border: none;
  44. color: white;
  45. padding: 10px 20px;
  46. text-align: center;
  47. text-decoration: none;
  48. display: inline-block;
  49. font-size: 16px;
  50. margin: 4px 2px;
  51. cursor: pointer;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="header">
  57. <h1>个人资料</h1>
  58. </div>
  59. <div class="content">
  60. <div class="section">
  61. <div class="section-title">基本信息</div>
  62. <div class="form-control">
  63. <label>姓名:</label>
  64. <input type="text" value="张伟" readonly>
  65. </div>
  66. <div class="form-control">
  67. <label>职位:</label>
  68. <input type="text" value="项目经理" readonly>
  69. </div>
  70. </div>
  71. <div class="section">
  72. <div class="section-title">联系方式</div>
  73. <div class="form-control">
  74. <label>手机号:</label>
  75. <input type="text" value="13912345678" readonly>
  76. </div>
  77. </div>
  78. <div class="section">
  79. <div class="section-title">公司信息</div>
  80. <div class="form-control">
  81. <label>公司名称:</label>
  82. <input type="text" value="建筑公司" readonly>
  83. </div>
  84. </div>
  85. <div class="section">
  86. <a href="#" class="button">编辑资料</a>
  87. </div>
  88. </div>
  89. </body>
  90. </html>