网站收藏怎么弄_网页设计制作网站模板
摘要：我的博客必须得浅显易懂，还得具有实践操作的可行性，哪怕没学过网页设计的相关知识，本篇博客内容也是可以通过自己的努力操作出来了的（保姆级教学）
不过，还是当成图一乐来阅读吧，虽然它比直接点开浏览器收藏夹要更容易找到，但确实需要自己折腾折腾。写代码是一件很有趣的事情，学到的知识能用到操作上，真的会很有成就感的。
真正的摘要（吐槽）：
当我时常需要使用某些网站（懂得都懂），需要进行以下三步👇
1.打开浏览器后；
2.搜一下自己想访问的网站；
3.然后点进去；
*4.可能需要登录；
*5.查看自己经常看的内容
……
有时候我看到了很好的网站但又不常用，导致每次想用的时候又要去搜一搜；或者我有时要上学校抢课系统，却因为忘记了网址慢人一步而抢不到心仪的课程（其实也不用抢，根本就抢不到）等等等等。
emmm其实可以直接收藏在浏览器里，但如果换台电脑，需要访问自己想看的网站时，那就只能重复以上的步骤，就很不爽。如果我想更快一点打开某某网站，如同桌面快捷方式一样……So，有没有更好的办法稳定地访问自己的常用网站；或者把它们记下来（抄网址），做到分享给他人的操作。
那我不能自己写个收藏夹吗？
必须 行 ！
最终效果图展示
只要思想不滑坡，办法总比困难多！
项目说明： 使用Javascript的打印输出代码进行超链接的跳跃，轻松简单地写一个相当于响应式的(html)网页。
需要准备： 有电脑就行，键盘它会自己打代码！（我知道大伙都喜欢热乎且复制粘贴即用的代码，本篇末尾处会给出来的）
OK，全体目光向我看齐，看我看我，我宣布个事儿：
我要写个收藏夹！
==============================分割线分割线===============================
我的思路：计划着写一个html网页，它具有如同超链接跳转页面的功能，比如在CSDN中点开任何网页中的元素，都会弹出新网页。可以理解成弹出的新网页，都是我们所想收藏的网站。
简单点说：
1.我们可以写个html文件，它可以U盘携带，也可以分享给他人（适合学习通、智慧树之类的）
2.通过css格式去写个盒子样式，让咱的收藏夹长得不那么寒碜（稍微稍微好看点就行）
3.用Javascript写相关要求的超链接效果及编辑收藏的网址。
直接来吧！
HTML板块：
html的编写其实挺容易的，在DW或者是WebStorm等编译器都是可以写html的。这里我分两种角度来说明如何创建html文件:1.有网页设计学习过的孩子们；2.毫无任何相关知识又想学的宝宝们。
1.编译器创建html文件（有网页设计学习过的孩子们）
你能跟我保证(学过网页设计）在2022年这个关键的时间点还不会创建？！ 脸，脸都丢光了。
2.零基础创建html文件（给想学习的宝宝）
咱可以用上段谈到的编译器去直接创建，也可以勇一点，用记事本来写！
（1）编译器创建
首先需要下载一个编译器（个人推荐是WebStrom，但如果想要免费的话，可以用IJidea）
具体操作如图所示。
（2）记事本创建（不需要编译器，直接来整）
操作如下图，不过需要自己打入html格式，或者复制粘贴下文代码即可。
（在记事本中写入具体代码）
在完成代码的编写后，将记事本格式转html格式（只有后缀名改成.html才能成为网页）
CSS板块：
css的概念：写在html中的<head>与<body>标签之间的<style>标签，功能强大的辅助！
这里提供的是写居中盒子的代码
<style> * { margin: 0; padding: 0; } .content { width: 100vw; height: 100vh; background-color: cornflowerblue; background-size: cover; } .content1 { width: 100vw; overflow: hidden; margin: 0 auto; text-align: center; line-height: 100px; background-color: cornflowerblue; } </style>同时本篇参考了B站UP主 玛卡巴卡pap 下雨的动态特效（此css部分会在下文显示）
（再次感谢up主的帮助）
JS板块：
我这里提供的代码块是JS功能——用JS的输出代码来保存字符串，通过点击网页中的文字进行超链接跳转，顺便设置一下字体大小和颜色。
<div class="content1"> <script type="text/javascript"> document.write('百度'.fontcolor('white').fontsize(6).link('https://www.baidu.com')) </script> </div>用盒子属性把整个js打印都包起来，并指定css样式。基本上在<body>标签中把上面这段复制粘贴并改一改内容和网址，就能做到鼠标单击后跳转页面的功能了。
其中'百度'是自定义的显示字符，后面的'white'是白色字体，然后就是6号字体大小，最后的link带的网址就是可以单击后跳转的目的网页。
值得注意的是，有些网址如果是需要登录的，尽量写登录后显示的网址（带有uid的）
关于雨滴下落特效的css及js代码参考：
<style> #rainBox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; } .rain { position: absolute; width: 2px; height: 50px; background: linear-gradient(rgb(249, 249, 249), rgba(221, 255, 2, 0.8)); } </style><script> const box = document.getElementById('rainBox'); let boxHeight = box.clientHeight; let boxWidth = box.clientWidth; //页面大小发生变化时，改变盒子大小 window.onresize = function () { boxHeight = box.clientHeight; boxWidth = box.clientWidth; } //每隔一段时间，添加雨滴 setInterval(() => { const rain = document.createElement('div'); rain.classList.add('rain'); rain.style.top = 0; //随机刷新雨点位置 rain.style.left = Math.random() * boxWidth + 'px'; //随机雨点透明度 rain.style.opacity = Math.random(); box.appendChild(rain); //每隔一段时间，雨水下落 let race = 1; const timer = setInterval(() => { if (parseInt(rain.style.top) > boxHeight) { clearInterval(timer); box.removeChild(rain); } race++; rain.style.top = parseInt(rain.style.top) + race + 'px' }, 20) }, 50) </script>啊哈哈哈哈，这代码十分滴珍贵，应该让同志们先看，看啊都给我看，都不复制粘贴是吧？
最终代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收藏汇总</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 100vw;
height: 100vh;
background-color: cornflowerblue;
background-size: cover;
}
#rainBox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}
.rain {
position: absolute;
width: 2px;
height: 50px;
background: linear-gradient(rgb(249, 249, 249), rgba(221, 255, 2, 0.8));
}
.content1 {
width: 100vw;
overflow: hidden;
margin: 0 auto;
text-align: center;
line-height: 100px;
background-color: cornflowerblue;
}
</style>
<body>
<div class="content">
<div id="rainBox"></div>
<div class="content1">
<script type="text/javascript">
document.write('百度'.fontcolor('white').fontsize(6).link('https://www.baidu.com'))
</script>
</div>
<!--把div这五行代码反复粘贴，修改内容即可填充网页-->
</div>
<script>
const box = document.getElementById('rainBox');
let boxHeight = box.clientHeight;
let boxWidth = box.clientWidth;
//页面大小发生变化时，改变盒子大小
window.onresize = function () {
boxHeight = box.clientHeight;
boxWidth = box.clientWidth;
}
//每隔一段时间，添加雨滴
setInterval(() => {
const rain = document.createElement('div');
rain.classList.add('rain');
rain.style.top = 0;
//随机刷新雨点位置
rain.style.left = Math.random() * boxWidth + 'px';
//随机雨点透明度
rain.style.opacity = Math.random();
box.appendChild(rain);
//每隔一段时间，雨水下落
let race = 1;
const timer = setInterval(() => {
if (parseInt(rain.style.top) > boxHeight) {
clearInterval(timer);
box.removeChild(rain);
}
race++;
rain.style.top = parseInt(rain.style.top) + race + 'px'
}, 20)
}, 50)
</script>
</script>
</body>
</html>补充：
雨滴特效版权归属
WebStorm编译器官网下载
IntelliJ IDEA编译器官网下载 (建议下载社区版)
我将我个人常用的编程类学习平台汇总放在云盘里了，需要的可以点下方链接自取！
我个人在用的编程向推荐网站（阿里云盘下载）
那么，下次再见啦
==============================THE END===============================
