目标

做一个自己使用的前端常用网址导航.

成果预览

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

要点笔记

--制作流程中需要注意以及当时漏掉的地方

1. 网页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

※

若之后有想要优化的地方会继续补充.