訂餐系統是如今很多人使用的一個方便快捷的點餐方式。在系統的登錄界面設計中，CSS起到了至關重要的作用，既能美化界面，也可以幫助用戶更好地操作。

/* 登錄界面的CSS樣式 */
.login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 400px;
}
.login h2 {
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
text-align: center;
}
.login input[type="text"], .login input[type="password"] {
width: 100%;
height: 50px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
color: #333;
}
.login input[type="submit"] {
width: 100%;
height: 50px;
border-radius: 5px;
border: none;
background-color: #2196f3;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.login input[type="submit"]:hover {
background-color: #0c7cd5;
}

在上述代碼中，我們首先用了一個包裹層，使用了絕對定位并設置了居中。然后我們設置了一些樣式，包括了背景顏色、邊框、陰影、間距等。h2標簽用來設置標題的樣式，我們對它進行了字號、顏色和對齊方式的設置。在輸入框的樣式中，我們設置了寬度、高度、邊框樣式、圓角、內邊距、字號、字體顏色以及下邊距。在提交按鈕的樣式中，我們設置了寬度、高度、圓角、邊框、背景顏色、字體顏色、字號和光標樣式。

總的來說，這個樣式設置非常簡單易懂，使用了少量的代碼，實現了讓界面更美觀易用的效果。