css实现点击收藏功能

实现点击收藏功能需要用到JavaScript和CSS。首先，定义一个收藏按钮，然后使用CSS样式来设计按钮的样式。接着，绑定一个点击事件，当用户点击按钮时，使用JavaScript代码中的localStorage属性将收藏内容存储至本地浏览器中。在下次用户访问页面时，可以通过localStorage获取之前收藏的内容并显示在页面上。具体的实现方式可以参考下面的示例代码：

HTML代码：

<button id="bookmark">收藏</button>

JavaScript代码：

var bookmarkButton = document.getElementById("bookmark");

bookmarkButton.onclick = function() {

//获取收藏的内容

var content = "这里是收藏的内容";

//将收藏的内容存储至本地浏览器中

localStorage.setItem("bookmark", content);

}

//在页面加载时获取之前收藏的内容并显示在页面上

window.onload = function() {

var bookmark = localStorage.getItem("bookmark");

if (bookmark) {

//显示之前收藏的内容

alert(bookmark);

}

}

CSS代码：

#bookmark {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

font-size: 16px;

border: none;

cursor: pointer;

}

#bookmark:hover {

background-color: #3e8e41;

}

注意：该示例代码是一种简单的实现方式，实际情况中可能需要对代码进行改进以达到更好的用户体验和安全性。