在前端開發中，我們經常需要使用輸入框來讓用戶輸入內容。而制作輸入框時，我們可以使用div和CSS來實現。下面我們來簡單介紹一下如何制作輸入框。

<div class="input-wrap">
<input type="text" placeholder="請輸入內容" />
</div>

首先，我們先創建一個包裹輸入框的div，給它一個樣式類名為"input-wrap"。在div內部，我們使用input標簽來創建文本輸入框，并且使用"placeholder"屬性設置輸入框的默認提示文字。

.input-wrap {
position: relative;
width: 300px;
margin: 20px auto;
}
.input-wrap input {
width: 100%;
height: 40px;
padding: 10px 20px;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.input-wrap input:focus {
border-color: #007bff;
outline: none;
}
.input-wrap input::-webkit-input-placeholder {
color: #aaa;
}
.input-wrap input::-moz-placeholder {
color: #aaa;
}
.input-wrap input:-ms-input-placeholder {
color: #aaa;
}
.input-wrap input::placeholder {
color: #aaa;
}

接下來，我們要為輸入框和輸入框所在的div設置樣式。我們首先為div設置一些基本樣式，包括相對定位、寬度、居中等。然后，我們為輸入框設置一些具體樣式，包括寬度、高度、內邊距、邊框、圓角等。我們使用"box-sizing"屬性來使輸入框的寬高包含內邊距和邊框。另外，我們還設置了輸入框獲取焦點時的樣式以及"placeholder"的顏色。

通過上述代碼，我們就成功地創建了一個簡單的輸入框。通過修改樣式，我們還可以實現更多效果，比如添加圖標、調整樣式等。