用戶登錄界面是網站或應用程序中必不可少的一部分,優美的界面設計能夠提升用戶使用體驗,而其中的CSS樣式則是其中重要的一環。
.login-form { width: 400px; margin: 100px auto; } .login-form h2 { text-align: center; font-size: 28px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } label{ display: block; font-size: 16px; color: #333; margin-bottom: 10px; } .form-control { width: 100%; height: 40px; font-size: 16px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } .btn { width: 100%; height: 40px; font-size: 18px; color: #fff; background-color: #3498db; border: none; border-radius: 5px; cursor: pointer; }
上述代碼展示了一個簡單的用戶登錄界面的CSS樣式,其中.login-form定義了登錄表單的整體寬度和居中效果,h2標簽定義表單標題的樣式,form-group用來控制每個輸入框的間距,label定義輸入框的標題,form-control控制輸入框的樣式,btn定義提交按鈕的樣式。
通過以上的樣式定義,用戶登錄界面將會擁有簡潔明了的視覺效果,用戶在操作時也容易上手。