最近,越來越多的網站開始使用會員系統來管理用戶,為了讓用戶更方便地使用這些網站,我們需要設計一個漂亮而實用的會員注冊CSS。以下是一些有用的CSS代碼段,可以幫助你創建一個漂亮的會員注冊表單。
/* 設置表單樣式 */ form { width: 320px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; background-color: #f2f2f2; border-radius: 10px; } /* 設置輸入框樣式 */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } /* 設置按鈕樣式 */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* 鼠標懸停時設置按鈕樣式 */ button:hover { background-color: #45a049; } /* 設置取消按鈕樣式 */ .cancelbtn { width: auto; padding: 10px 18px; background-color: #444; } /* 設置容器樣式 */ .container { padding: 16px; } /* 清除浮動 */ .clearfix::after { content: ""; clear: both; display: table; } /* 設置登錄鏈接樣式 */ span.psw { float: right; padding-top: 16px; } /* 設置會員注冊提示框樣式 */ .alert-box { color: #fff; font-weight: bold; border-radius: 10px; padding: 20px; margin: 10px 0; } /* 設置會員注冊成功提示框樣式 */ .success { background-color: #4CAF50; } /* 設置會員注冊失敗提示框樣式 */ .error { background-color: #f44336; }
現在,你可以使用這些代碼來創建一個漂亮的、有用的會員注冊表單,幫助用戶更輕松地享受你的網站。
上一篇優惠券頁面css
下一篇使用css使div移動