CSS是前端開發中不可或缺的一部分，可以實現很多驚人的效果。其中之一就是使div可編輯，適用于需要用戶輸入數據的網頁。

div[contenteditable="true"]{
border: 2px solid #ccc;
padding: 10px;
}

通過設置contenteditable屬性為true，就可以使div變成可編輯狀態。如果還需要改變樣式，可以使用CSS選擇器來設置邊框、內邊距等屬性，增強用戶的編輯體驗。

同時，如果需要保存用戶編輯的數據，可以使用JS獲取用戶輸入的內容，將其保存到服務器或瀏覽器本地存儲中。

//獲取可編輯div的內容
var editableDiv = document.querySelector('div[contenteditable=true]');
var content = editableDiv.innerHTML;
//將內容保存到本地存儲中
localStorage.setItem('userContent',content);

需要注意的是，可編輯div的內容可能會包含一些HTML標簽，需要進行過濾處理，避免安全問題。

//過濾特殊字符
function filterSpecialChar(str){
return str.replace(/[&<>"'<code>=\/]/g,function(char){
return {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'</code>': '`',
'=': '=',
'/': '/'
}[char]
});
}
//保存過濾后的內容
var editableDiv = document.querySelector('div[contenteditable=true]');
var rawContent = editableDiv.innerHTML;
var filteredContent = filterSpecialChar(rawContent);
localStorage.setItem('userContent',filteredContent);

通過CSS和JS的配合，可以很輕松地實現可編輯div的功能，讓用戶在網頁上方便地輸入和保存數據。