我最近在學(xué)習(xí)前端開發(fā)，發(fā)現(xiàn)在項目中有很多的UI組件需要用到，但是每次都要在頁面中手動寫CSS樣式很麻煩，我便決定封裝一些常用的CSS組件。

.btn {
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
background-color: #007bff;
color: #fff;
text-align: center;
text-decoration: none;
}

這是我封裝的按鈕組件，使用時只需在HTML中加入btn類即可輕松地添加一個美觀的按鈕。

.alert {
padding: 16px;
border-radius: 4px;
background-color: #f44336;
color: #ffffff;
}
.alert-success {
background-color: #4CAF50;
}
.alert-warning {
background-color: #ff9800;
}
.alert-info {
background-color: #2196F3;
}

這是我封裝的警告框組件，可以根據(jù)需要選擇不同的樣式，使頁面更美觀。

.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
margin-bottom: 4px;
}
.form-input {
display: block;
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}

這是我封裝的表單組件，包括表單輸入框、表單標(biāo)簽和表單組。

以上是我封裝的一些CSS組件，它們可以輕松地應(yīng)用到任何項目中，讓頁面更加美觀、簡潔。