要想設計一個漂亮的登陸頁面,我們可以考慮使用CSS來實現。以下是一些可以幫助你完成這個任務的CSS技巧:
/* 聲明一個class,用于設置登陸表單的樣式 */ .login-form { width: 300px; /* 登陸表單的寬度 */ padding: 30px; /* 設置內邊距,增加美觀度 */ background-color: #fff; /* 背景顏色 */ border-radius: 5px; /* 圓角 */ border: 1px solid #ddd; /* 設置邊框,增加層次感 */ } /* 設置表單中的文本框樣式 */ .login-form input[type="text"], .login-form input[type="password"] { width: 100%; /* 充滿整個父級容器 */ padding: 10px; /* 設置內邊距,增加美觀度 */ border: 1px solid #ddd; /* 增加邊框 */ border-radius: 2px; /* 圓角 */ margin-bottom: 20px; /* 增加下邊距 */ } /* 設置登陸按鈕的樣式 */ .login-form button[type="submit"] { width: 100%; /* 充滿整個父級容器 */ padding: 10px; /* 設置內邊距,增加美觀度 */ background-color: #4CAF50; /* 背景顏色 */ color: #fff; /* 文字顏色 */ border: none; /* 沒有邊框 */ border-radius: 2px; /* 圓角 */ } /* 當鼠標懸停在登陸按鈕上的時候,改變它的背景顏色 */ .login-form button[type="submit"]:hover { background-color: #3e8e41; }
以上是一些基礎的CSS技巧,在實現登陸頁面的時候可以進行一些自由的改進和創新。希望以上代碼可以幫到你。
上一篇css如何將背景清除
下一篇css如何將背景圖的顏色