對于初學者來說，系統登錄頁面的設計是學習 CSS 的重要部分之一。下面我們將介紹幾個常見的樣式效果，幫助您在設計系統登錄頁面時更加得心應手。

1.背景色

body {
background-color: #f2f2f2;
}

2.對齊方式

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
text-align: center;
}

3.表單樣式

input[type="text"], input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

通過以上幾個常見的樣式效果，我們可以設計出一個簡單、美觀的系統登錄頁面。希望這篇文章能對您學習 CSS 系統登錄頁面的設計有所幫助。