HTML+CSS实现网站收藏夹功能

最新推荐文章于 2024-05-16 11:12:16 发布
最新推荐文章于 2024-05-16 11:12:16 发布
阅读量1.5k 收藏 5
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010171729/article/details/129223693
版权

已将CSS样式已嵌入HTML，所以为单文件。

<html>
<head>
<meta charset="utf-8">
<title>HTML实现网站收藏夹功能</title>
</head>
	<style type="text/css">
		a {text-decoration: none;	}
		a:link{color: black;}
		a:visited{color: red;}
		a:hover{color: purple;}
		a:active{color: orange;}
		body {background-color: linen;padding:60px;margin:60px;border:60px}
		h1 {color: maroon;margin-left: 40px;text-align:center;}
		h2 {color: maroon;margin-left: 40px;text-align:center;}
		h3 {color: maroon;margin-left: 40px;}
		dt {color: maroon;margin-left: 40px; text-align:center;font-size: 22px}
		table {border-collapse:collapse;width:100%;}
		th {padding:20px 10px;line-height:10px;border:10px solid center;background:center;}
		td {padding:10px 10px;line-height:20px;border:2px solid white;text-align:center}
	</style>
<body>
	<h1>😁加班使我快乐😁</h1>
	<h1>👶➡🧑➡👴➡💀➡🧟‍♂️ </h1>
	<marquee  direction="down" scrollamount="7"><h1>⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇</h1></marquee>
	<br></br>
	<table>
		<tr><th colspan="4"><dt>分类1</dt></th></tr>
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>

		<tr><th colspan="4"></th><tr><tr><th colspan="4"><dt>分类2</dt></th></tr>
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>
	
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>

		<tr><th colspan="4"></th><tr><tr><th colspan="4"><dt>分类3</dt></th></tr>
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>
	
		<tr>
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站1</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站2</a></th> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站3</a></td> 
		<td><a href="植入网址" title="鼠标停留说明" target="_blank">网站4</a></td> 
		</tr>

	</table>
	<marquee  direction="right" scrollamount="13"><h3>😁快乐到我爆炸😁</h3></marquee>
	<br></br>
	<br></br>
	<br></br>
	<br></br>
	<br></br>
	<br></br>
	<br></br>
	<h2>账户信息</h2>
	<table >
	<tr>
	<td>账号</td>
	<td>密码</td>
	<td >备注</td>
	</tr>
	<tr>
	<td>账号1</td>
	<td>密码1</td>
	<td>备注1</td>
	</tr>
	<tr>
	<td>账号2</td>
	<td>密码2</td>
	<td>备注2</td>
	</tr>
	<tr>
	<td>账号3</td>
	<td>密码3</td>
	<td>备注3</td>
	</tr>
	<tr>
	<td>账号4</td>
	<td>密码4</td>
	<td>备注5</td>
	</tr>
	</table>
</body>
 </html>

效果图如下：

 

大墨叔叔
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端--收藏功能的实现
weixin_30745553的博客
08-02 2381
收藏按钮： <span class="mui-icon mui-icon-star mui-pull-right"></span> View Code js逻辑代码： //一进入页面查询一下当前项目收藏、非收藏状态，点击后进行收藏、取消收藏 $.ajax({ url: "....
值得收藏的7个实用CSS常用的代码（附带效果）
m0_55258023的博客
05-25 1790
值得收藏的5个实用CSS常用的代码（附带效果）
html——仿e签宝合同归档html页面实现(纯静态,类似收藏夹页面)
知北行的博客
04-06 2311
先放一下e签宝合同归档页面： 这里只编写了其主体部分，模仿编写的效果如下： 该页面使用bootstrap实现布局，界面的样式以及相关的图标按钮使用layui实现。各个按钮都实现了相应的功能，包括新建分类、归档、批量归档等，以及左侧的菜单按钮。 主页面archive_manager2.html代码(包含了交互逻辑的代码，可能有点长)： <!DOCTYPE html> <html...
html实现“加入收藏”代码
weixin_33923148的博客
06-12 5644
html实现“加入收藏”代码 <a href="#" onclick="javascript:window.external.addFavorite('http://www.hwedus.com','惠文教育')" title="收藏本站到收藏夹">收藏本站</a> 转载于:https://www.cnblogs.com/zhpblog/p/9171431.h...
值得html初学者收藏的响应式前端开发框架
最新发布
2401_84094029的博客
05-16 239
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html5 加入收藏夹,设为首页、添加到收藏夹代码
weixin_42515687的博客
06-19 1599
打开页面,我们通常都会发现,页面中经常使用这样的功能：设为首页,添加到收藏夹！前者的含义是：将当前打开的页面设置为浏览器的首页,当浏览器启动时,自行打开该页面！后者的含义是：将当前打开的页面添加到收藏夹,将其网址保存起来,方便今后访问,这极大的方便了很多网友,如果我们上网发现哪个网站比较好,想收藏起来,但是域名又难记,这个时候,将其添加到收藏夹,是最有效的方法了！收藏夹还可以建立文件夹,可以很方便...
收藏本站html,收藏本站JS代码 兼容现代大多浏览器
weixin_42514949的博客
06-17 601
东灵通网站是对原有网站进行的改版升级，目的是为了更好地展示自己的业务。在制作上主要结合后台CMS生成静态的HTML网页文件，没有用到什么复杂的技术，主要就是前端的HTML+CSS，设计风格也是简单明了大方风格为主。需要记录的一个细节是：收藏本站功能，以前的收藏本站功能JS代码，对于现代的浏览器来说，如firefox、chrome等，失效了！在网上找了一些，一样还是失效，最后，换成以下的代码，兼容现...
html实现添加到收藏夹功能,＆＃34;添加到收藏夹＆＃34;用于更改类和innerHTML的按钮...
weixin_35853363的博客
06-27 552
我不确定这是否是您正在寻找的东西但是，我用更多的方法链接和抽象重写了您的解决方案：HTML：Add To FavsJS：//Moved btn text into variable so it can be changed more easilyvar btn_text = {default: "Add To Favs",added: "Selection Added",remove: "Remo...
网页制作 HTML设为首页和加入收藏_动力节点Java学院整理
01-22 636
网页制作 HTML设为首页和加入收藏_动力节点Java学院整理 IE浏览器下如何实现"设为首页"，"加入收藏"的功能 解决思路： 将指定URL设为首页的功能主要是依靠IE默认行为homePage的setHomePage方法，而将指定URL加入收藏夹的实现则是external对象的AddFavorite方法。 具体步骤： 设为首页 设为首页 加入收藏： 加入收藏 请使用IE浏览器进行测试。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家...
js 特效 html 特效 点击加入收藏夹
06-14
js 特效 html 特效 点击加入收藏夹 js 特效 html 特效 点击加入收藏夹
html+css品优购静态页面项目
03-23
`favicon.ico`是网站的图标，显示在浏览器地址栏和收藏夹中，是品牌识别的一部分。开发者通常会根据品牌标志制作适合的图标。 `js`文件夹可能包含JavaScript代码，这种脚本语言常用于添加交互性和动态功能，如表单...
CSS特效收藏和js实例
05-14
30种CSS分页效果配色方案; CSS层折叠(或收缩)与展开特效; CSS高度自适应代码（用了都说好）; JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换，带缩略图响应鼠标滑过; JS图片滚动代码（无缝、平滑）; 纯CSS实现链接提示(学习层定位); 适合企业站的DIV+CSS导航菜单; 用JavaScript在网页右下角弹出窗口; .......
前端HTML5+CSS+JavaScript学习笔记.docx
05-24
而`<head>`标签则包含了文档的元信息，如`<title>`定义页面标题，对于SEO（搜索引擎优化）至关重要，同时它还显示在浏览器标签页和收藏夹中。`<base>`标签为页面中的所有相对URL设定默认基础，方便链接处理。`<meta>...
基于html + css + js完成淘宝网首页效果
05-06
此外，`img`目录包含所有图片资源，`favicon.ico`是网站的图标，出现在浏览器地址栏和收藏夹中，而`Readme.txt`可能是开发者的注释或项目说明。 总结来说，这个项目通过HTML构建网页结构，CSS定义视觉样式，...
html网页纯静态花店购物网站源码div+css页面将计30页，大学生毕业设计源码
10-19
5. **收藏**：用户可以将心仪的商品添加到收藏夹，方便日后查看。 6. **加购**：除了购物车，用户还可以直接选择“加购”，快速将商品加入购物车。 此外，这个源码作为毕业设计素材，对于学习前端开发的学生来说，...
自定义导航页，你的酷炫收藏夹
08-18
此外，考虑到收藏夹的功能，你可能还需要了解数据存储技术。可以选择使用本地存储（`localStorage`或`sessionStorage`）在浏览器端保存用户的自定义设置，或者通过Ajax异步请求将数据存放在服务器端数据库中，如...
html实现“设为首页”加入收藏”代码
nihaomayu的专栏
06-13 2万+
<br />html实现“设为首页”代码<br /><br /><a onclick="this.style.behavior='url(#default#homepage)';this.setHomepage('http://www.hwedus.com')" href="http://www.hwedus.com">设为首页</a><br /> <br />html实现“加入收藏”代码<br /><br /><br /><a href="#" onclick="javascript:window.ext
html超级简单实现点赞（收藏）和取消赞效果
热门推荐
sxs161028的博客
07-28 2万+
1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀。今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示。 2.详情 1.css样式.like{ font-size:66px; color:#ccc; cursor:pointer;}2.html内容<p class="like">❤</p>3.js代码<script typet="text/jav
css+js实现收藏功能
06-08
要实现收藏功能，我们需要使用JavaScript来处理用户的点击事件，并使用CSS来显示相应的样式。以下是一个实现收藏功能的示例代码： HTML代码： ``` <div id="favorite" class="favorite-icon" onclick="toggleFavorite()"> <i class="far fa-heart"></i> <span>Add to Favorites</span> </div> ``` 在这个示例中，我们创建了一个带有图标和文本的div元素，并为它设置了一个ID为“favorite”，一个class为“favorite-icon”，并且添加了一个onclick事件处理函数“toggleFavorite()”。 CSS代码： ``` .favorite-icon { display: flex; align-items: center; cursor: pointer; } .favorite-icon i { font-size: 24px; margin-right: 5px; } .favorite-icon.added i { color: #FF4136; } .favorite-icon.added span { color: #FF4136; } ``` 在这个示例中，我们使用了Flex布局来将图标和文本垂直居中，并设置了一个指针光标以显示为可点击元素。我们还定义了一个“.added”类，用于显示已添加到收藏夹的样式。 JavaScript代码： ``` function toggleFavorite() { var favorite = document.getElementById('favorite'); if (favorite.classList.contains('added')) { favorite.classList.remove('added'); favorite.querySelector('span').innerHTML = 'Add to Favorites'; } else { favorite.classList.add('added'); favorite.querySelector('span').innerHTML = 'Remove from Favorites'; } } ``` 在这个示例中，我们创建了一个名为“toggleFavorite()”的函数，用于处理当用户单击收藏按钮时的事件。在该函数中，我们获取了ID为“favorite”的元素，并检查其是否包含了“added”类。如果包含，则将其删除，并将文本设置为“Add to Favorites”；否则，将其添加，并将文本设置为“Remove from Favorites”。 当用户单击收藏按钮时，toggleFavorite()函数将被调用，并根据情况添加或删除“added”类。CSS样式将根据类的存在与否来显示相应的样式。 这样，我们就实现了一个基本的收藏功能。当用户单击收藏按钮时，它会切换到添加或删除状态，并在UI上显示相应的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值