現在,很多網站都需要用戶進行登陸或注冊,為了方便用戶操作,我們可以使用CSS模板來美化登陸和注冊的頁面。 以下是一個基本的登陸/注冊頁面的CSS模板:
/* 登陸/注冊頁面CSS */ *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei',sans-serif; } body{ background-color: #eee; } .container{ max-width: 400px; margin: 30px auto; background-color: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .form-btn{ display: flex; justify-content: space-between; padding: 20px 30px; } .form-btn button{ padding: 10px; outline: none; border: none; cursor: pointer; background-color: #fff; color: #333; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); } .form-btn button:hover{ box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .form-btn .active{ background-color: #333; color: #fff; } .form-inner{ padding: 30px; } .form-group{ margin-bottom: 20px; } .form-group .form-label{ display: block; margin-bottom: 5px; font-size: 14px; font-weight: 700; color: #333; } .form-group input[type=text],.form-group input[type=password]{ width: 100%; padding: 10px; outline: none; font-size: 14px; color: #333; border: 1px solid #bbb; border-radius: 5px; box-shadow: none; } .form-group input[type=text]:focus,.form-group input[type=password]:focus{ border-color: #333; } .form-group .error-message{ display: none; margin-top: 5px; font-size: 12px; color: #f00; } .form-group.error .error-message{ display: block; } .form-group.error input[type=text],.form-group.error input[type=password]{ border-color: #f00; } .form-group.success input[type=text],.form-group.success input[type=password]{ border-color: #0f0; } .form-submit{ text-align: center; margin-top: 30px; } .form-submit button{ background-color: #333; color: #fff; padding: 10px 20px; border: none; outline: none; cursor: pointer; font-size: 16px; font-weight: 700; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); } .form-submit button:hover{ box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
上面的代碼樣式包含了登陸/注冊頁面需要的基本樣式,包括頁面布局、主色調、輸入框、按鈕等??梢愿鶕枰M行個性化調整,美化成自己喜歡的樣子。
現在您可以使用這個CSS模板來美化您的登陸/注冊頁面啦!祝您使用愉快!
下一篇css圖片和文字隔開