電商網站的登錄頁是最基礎且常見的頁面之一，其設計和實現對于用戶體驗和安全性有著重要的影響。在本文中，我們將通過一個簡單的CSS登錄頁示例來展示如何使用CSS來美化網頁并實現基本的表單驗證功能。

首先，我們需要在HTML中創建一個表單，包括用戶輸入的用戶名和密碼，并且給它們設置一個class名，例如“input-field”。如下所示：

<form>
<div class="input-field">
<label for="username">用戶名</label>
<input type="text" id="username" name="username" required />  
</div>
<div class="input-field">
<label for="password">密碼</label>
<input type="password" id="password" name="password" required />
</div>
<button type="submit">登錄</button>
</form>

然后，我們可以使用CSS來設計這些表單元素的樣式，讓它們看起來更加美觀和易于使用。例如，我們可以設置表單元素的寬度、背景顏色、圓角等樣式。

.input-field {
width: 90%;
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}

此外，我們還可以使用CSS來實現表單驗證的功能，例如在用戶輸入表單時，檢查用戶輸入的內容是否符合要求。例如，我們可以檢查密碼是否至少包含六個字符。如下所示：

input[type="password"]:invalid {
border: 2px solid red;
}
input[type="password"]:valid {
border: 2px solid green;
}

最后，我們需要使用JavaScript來完成表單驗證的功能。例如，我們可以使用一個簡單的if語句來檢查表單是否已經填寫完整，如果有任何一個表單元素為空，則提示用戶填寫完整表單。

const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
form.addEventListener('submit', (event) =>{
if (!username.value || !password.value) {
alert('請填寫完整表單！');
event.preventDefault();
}
});

通過以上步驟，我們已經成功地實現了一個美觀且具有基本驗證功能的登錄頁。通過使用CSS的技巧和JavaScript的功能，我們可以創建出各種各樣的美麗且用戶友好的頁面。