目标
做一个自己使用的前端常用网址导航.
成果预览
https://akanetang.github.io/my-page/dist/index.html
技术栈
- jQuery
- LocalStorage
- SVG Symbols
- 媒体查询
- git & Github
思路
- Figma作图
○ 将想好的页面样子画出来 - 实现手机端
○ 写HTML主页面
○ 写CSS,为各个部分添加样式
○ 写JS（事件监听、DOM操作） - 实现PC端
○ 通过媒体查询加上pc页面的CSS
○ 写JS（单独处理PC上的逻辑） - 发布到Github
要点笔记
--制作流程中需要注意以及当时漏掉的地方
-
网页head当中meta要设置好.可以看一下成熟网页的代码是怎么写的.
image.png
2.CSS reset(将浏览器本身自带的样式重置)以及给设置灰色背景。
image.png
3、按钮内的文字应设置为不换行
image.png
4.input默认有个border，需要删掉或者覆盖，不然很丑
image.png
5.代码里不要有很多height，不然重新改一下（经验）
6.只有a标签可以包含块级元素（本身里面是内联元素）
image.png
7.localstorage只能存字符串，不能存对象。所以要把hashmap保存为字符串。
（localStorage是挂在window下的，所以可以省略window.）
8.localStorage什么时候消失？当用户清除cookie及其他网站数据的时候，会被清除。（若是用户硬盘空间满了，可能会把数据删掉，但几率很小）无痕窗口关闭后也会删除数据。
9.搞一个背景图.(载入图片,图片重复,随页面滚动,原图片位于页面中上)
image.png
※
若之后有想要优化的地方会继续补充.
