摘要: 原文出处:https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子。 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定( 阅读全文
posted @ 2020-01-20 14:44 热爱前端知识 阅读(433) 评论(0) 推荐(0) 编辑
摘要: 先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道。布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, 阅读全文
posted @ 2020-01-20 14:11 热爱前端知识 阅读(336) 评论(0) 推荐(0) 编辑
摘要: 1、 减少http请求,合理设置 HTTP缓存 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。 减少http的主要手段是合并CSS 阅读全文
posted @ 2020-01-20 11:58 热爱前端知识 阅读(1888) 评论(0) 推荐(0) 编辑
摘要: 如题,祖先元素transform非none时,记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案。 层叠关系及参考视图 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优先级顺 阅读全文
posted @ 2020-01-20 10:24 热爱前端知识 阅读(344) 评论(0) 推荐(0) 编辑
摘要: 又想起08年的北京奥运会 其实更多的是 小岳岳的五环 还有hot-dog的rap 哼~就把车子开上五环 废话不说了 否则就变成演唱会了。 首先呢先分析我们需要设置五个宽高相等的div 并且要把border-radius属性值设为50% 设置上10px的实心边框默认颜色为黑色 当然只要比50%大都可以 阅读全文
posted @ 2020-01-20 09:36 热爱前端知识 阅读(675) 评论(0) 推荐(0) 编辑
摘要: 你是否眼红别人风轻云淡,将优秀当成一种习惯?你不止一次的想要努力一把,奈何总是三天打鱼,然后无限循环? 你是否受够了这种得过且过,碌碌无为的日子?如果是这样的话,那就接受这个小挑战吧! 初衷: 前端发展日新月异,必须要经常学习,充电才能保证自己的竞争力。基于此,我想要发起一个督促自己每天下班坚持学习 阅读全文
posted @ 2020-01-20 09:05 热爱前端知识 阅读(180) 评论(0) 推荐(0) 编辑
摘要: 在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Grid 栅格化布局,我至今还没有看到任何框架能提供其他有价值的东西。他们沉醉于模仿过去的做法,而不是着眼于未来。这使得发展受到限制。其中一个常见的问题就是,这些框架仍 阅读全文
posted @ 2020-01-20 08:40 热爱前端知识 阅读(418) 评论(0) 推荐(0) 编辑
摘要: 巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-border { position: relative; width: 1px; margin:14px 0 阅读全文
posted @ 2020-01-19 23:59 热爱前端知识 阅读(534) 评论(0) 推荐(0) 编辑
摘要: 最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件。给个例子 /*html*/ <input type 阅读全文
posted @ 2020-01-19 23:16 热爱前端知识 阅读(888) 评论(0) 推荐(0) 编辑
摘要: 前言 作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex)。通信方式根据组件之间的关系有不同之处。组件关系有下面三种:父-->子、子-->父、非父子 父-->子 父向子传递数据通过props **父组件代码** <template> <header-box :title-txt= 阅读全文
posted @ 2020-01-19 22:42 热爱前端知识 阅读(118) 评论(0) 推荐(0) 编辑