1.设计图的制作
在线预览:
2.项目中遇到的小技巧
1.input/button这些元素默认就有一些css,例如:为input添加border-radius时需要将其border: none;或者覆盖
2.一般情况下不允许内联元素包住块级元素,但是<a/>标签支持
<!-- a标签包裹display: block;块级元素 --> <a href="https://github.com/"> <div class="site"> <div class="logo">G</div> <div class="link">github.com</div> </div> </a>
3.JSON实现 字符串String和对象Object 相互转换
//将对象变为字符串 const str = JSON.stringify(obj) //将字符串变为对象 const obj = JSON.parse(str);
3.localStorage本地存储
存储思路:
我们将新创建的网站信息放入一个hashMap中,触发window.onbeforeunload事件,在页面关闭或刷新时使用localStorage进行存储。在下次进入页面时读取localStorage中hashMap数据进行渲染,达到保存新建网站信息存储的效果。那么localStorage能存储多久呢?
存储时间:
一般情况下localStorage中的数据会存到不能继续存或者用户主动删除浏览器数据。无痕窗口的数据只存在于用户使用的这一段时间,当用户关闭页面localStorage中的数据就会被清空。
1.清除cookie及其他数据,会清空localStorage数据
2. 使用无痕窗口访问页面
4.一键式导航网站实现功能及github上传
功能:
1.搜索栏进行搜索
2.键盘按下网站首字母自动跳转
3.实现新增网站 和 鼠标经过删除网站
技术栈:
jQuery / CSS 布局 / 媒体查询
localStorage / SVG Symbols / iconfont.cn / 阻止冒泡 / JSON 序列化在线查看: