在現代網頁設計中，登錄注冊界面是非常重要的一個部分。為了讓用戶方便地注冊和登錄，我們需要使用CSS代碼來美化這個界面。

/* 登錄表單樣式 */
form.login {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
form.login input[type="text"], form.login input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
}
form.login input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
}
form.login input[type="submit"]:hover {
background-color: #45a049;
}
/* 注冊表單樣式 */
form.registration {
display: flex;
flex-direction: column;
align-items: center;
}
form.registration input[type="text"], form.registration input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
}
form.registration input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 5px;
cursor: pointer;
}
form.registration input[type="submit"]:hover {
background-color: #45a049;
}

在上面的代碼中，我們首先定義了一個登錄表單和一個注冊表單，并對它們進行了相應的樣式調整。我們使用了 flex 布局來讓表單元素水平居中，并設置了輸入框和按鈕的樣式。

注意，我們使用了 input[type="text"] 和 input[type="password"] 分別對文本框和密碼框進行了樣式設置，這可以幫助我們更細致地控制表單元素的樣式。

通過這些 CSS 代碼的設置，我們可以創建出一個簡潔、美觀的登錄注冊界面，為用戶提供更加方便快捷的注冊登錄體驗。