CSS和JavaScript是Web開發中非常重要的兩種技術，它們可以實現豐富的交互體驗和各種功能。其中，收藏功能是非常常見的，需要用到CSS和JavaScript的配合。下面，我們就來看一下如何利用CSS和JavaScript實現收藏功能。

首先，我們要實現一個按鈕，當用戶點擊按鈕時，將當前頁面加入到收藏夾中。我們可以用CSS來美化按鈕的樣式：

.favorite-btn {
border: 1px solid #ccc;
background-color: #eee;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.favorite-btn:hover {
background-color: #ccc;
}

接下來，我們要用JavaScript來實現點擊按鈕后的操作。具體來說，我們需要使用瀏覽器提供的API，調用“window.addToFavorites()”函數，將當前頁面加入到收藏夾中。代碼如下：

function addToFavorites() {
if (window.sidebar && window.sidebar.addPanel) { // Firefox
window.sidebar.addPanel(document.title, window.location.href, "");
} else if (window.external && window.external.AddFavorite) { // IE & Opera
window.external.AddFavorite(window.location.href, document.title);
} else { // other browsers
alert("您的瀏覽器不支持此操作，請使用Ctrl+D添加收藏");
}
}
document.querySelector(".favorite-btn").addEventListener("click", addToFavorites);

以上代碼中，我們首先定義了一個“addToFavorites()”函數，用于將當前頁面加入收藏夾中。然后，我們使用“document.querySelector()”函數獲取到頁面中的按鈕元素，用“addEventListener()”函數給按鈕添加一個點擊事件，當用戶點擊按鈕時，就會調用“addToFavorites()”函數，并將當前頁面加入到收藏夾中。

至此，我們就成功地實現了收藏功能。通過CSS美化按鈕的樣式，通過JavaScript實現按鈕點擊后的操作，我們可以讓用戶更加方便地收藏自己喜歡的網頁。