CSS是網頁設計中必不可少的一部分，它可以讓網頁看上去更加美觀、整潔、規范，對網站的用戶體驗起到了很大的作用。

今天我們來學習一下如何使用CSS來寫一個簡單的姓名框，讓網頁看上去更加專業。下面是我們的代碼示例：

<div class="name-box">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" placeholder="Enter First Name">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name" placeholder="Enter Last Name">
</div>
<style>
.name-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 10px #333;
}
input {
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
label {
font-weight: bold;
}
</style>

在上面的代碼中，我們使用了一個div元素來包裹兩個input元素，并使用CSS讓它們排列成一列。我們還給整個div元素添加了一些樣式，如邊框、圓角和陰影，讓界面看上去更加美觀。同時，我們還為input元素和label元素添加了一些基本樣式，如邊框、邊框半徑和字體粗細。

這就是一個簡單的姓名框，在實際的網頁設計中，我們可以將其嵌入到用戶注冊或登錄頁面中，為用戶提供更加整潔、規范的輸入界面。