![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
公孙元二
如果你看到这句话,幸运值+1
展开
-
鼠标移到导航上有下划线(下划线跟随导航栏菜单栏上的鼠标移动)
效果图:HTML代码<html><head><style> ul { display: flex; justify-content : center; /*justify-content : center;元素在主轴(页面横轴)上居中排列*/ } li { position: r...原创 2019-08-30 15:03:02 · 4609 阅读 · 0 评论 -
DOMContentLoaded
是什么当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。这时问题又来了,“HTML 文档被加载和解析完成”是什么意思呢?或者说,HTML 文档被加载和解析完成之前,浏览器做了哪些事情呢?那我们需要从浏览器渲染原理来谈谈。浏览器向服务器请求到了 HTML 文档后便开始解析,产物是 DOM(文档对象模型),到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM(CSS 对象模型)转载 2021-10-26 09:40:58 · 601 阅读 · 0 评论 -
在vue项目中 判断sessionStorage是否存在
当 sessionStorage中未存储任何键值时,若要对某个键的值是否为空进行判断,可进行如下判断 if (sessionStorage.getItem("name")) { person.name = JSON.parse(sessionStorage.getItem("name")); }原创 2021-10-25 16:12:25 · 3064 阅读 · 0 评论 -
可以放心使用的css字体的font-family(无侵权风险,无律师函警告风险)
body { font-family: /* personal for Chinese project */Source Han Sans SC, /* system default */system-ui, /* 原创 2021-05-07 14:05:30 · 950 阅读 · 0 评论 -
在vue中更好的使用客户端存储localStorage
代码示例:if (localStorage.getItem('cats')) { try { this.cats = JSON.parse(localStorage.getItem('cats')); } catch(e) { localStorage.removeItem('cats'); } }优点:1.为了存储对象和数组这样更复杂的数据,你必须使用 JSON 来对数据进行序列化和反序列化。2.我们转而调用 Local转载 2021-04-07 16:32:38 · 225 阅读 · 0 评论 -
HTML JS DOM事件及代理
DOM 的增删改查增:document.createElement(‘span’)、parent.appendChild(x)删:y.parent.removeChild(y)改:x.someAttr = ‘…’、y.parent.insertBefore(appendElement,ele)查 querySelector、querySelectorAll、getElementById/ClassName/TagNameDOM 事件体系先说下专有名词:事件:在浏览器里的动作,可以是用户触转载 2021-01-22 16:47:46 · 243 阅读 · 0 评论 -
【像素与浏览器视口的细节】及移动web设置“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no“原因
初学网页制作,很常见的做法就是找各种线上的网页,然后查看源代码,参考学习这些网页是如何实现自己的设计的。而对我来说,我印象最深的一个知识点,是这样的:<div class="wrapper"></div>.wrapper{width:980px;margin:0 auto;}这个在现在来看,其实就是经典的固定宽度的网页布局。不过,以前的时候,我并不知道为什么这样做就可以。当时的理解是:一个定宽,水平居中的容器,来容纳网页的主体内容,就可以使网页能在不同分辨率的显示屏都有相对转载 2021-01-08 15:18:19 · 3023 阅读 · 0 评论 -
前端进阶-个人笔记-小知识(适合常来看看)
1. css一行文本超出"…"overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2.多行文本超出显示"…"display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;3.IOS手机容器滚动条滑动不流畅overflow: auto;-webkit-overflow-scrolling: touch;转载 2020-11-24 00:35:54 · 246 阅读 · 0 评论 -
前端常见写法报错、Eslint报错汇总(未完待续)
“Mixed spaces and tabs no-mixed-spaces-and-tabs”翻译:tab和空格不要混合使用解决方案:把这一行重新编辑或者移到上面一行再回车键换行下来。未完待续。。。原创 2020-11-09 15:21:26 · 208 阅读 · 0 评论 -
模仿支付宝支付成功特效:svg圆圈转动+打钩
效果图(这里用点击事件来模拟触发事件):代码:HTML <main> <div class="box"> <svg class="arrow" width="40" height="40" viewBox="0 0 40 40"> <circle cx="50%" ...原创 2020-02-09 16:26:39 · 2058 阅读 · 0 评论