摘要: 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它 阅读全文
posted @ 2020-10-14 20:03 酷儿q 阅读(266) 评论(0) 推荐(0)
摘要: 前言 自从前端三大框架react、vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是js驱动,在js没有解析加载完成之前页面无法展示,会处于长时间的白屏,带来了一定 阅读全文
posted @ 2020-10-14 20:01 酷儿q 阅读(218) 评论(0) 推荐(0)
摘要: 在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己、发展爱好、陪伴家人,工作、生活两不误。 提升效率的途径,无外乎就是「方法」和「工具」。以一个开发者的思维来想,就 阅读全文
posted @ 2020-10-14 19:48 酷儿q 阅读(188) 评论(0) 推荐(0)
摘要: 效果 效果图如下 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了,父容器来控制图标显示的位置,子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素 阅读全文
posted @ 2020-10-14 19:34 酷儿q 阅读(165) 评论(0) 推荐(0)
摘要: 一、什么是定位 改变元素在页面中的位置 二、定位的分类 1、普通流定位 2、浮动定位 3、相对定位 4、绝对定位 5、固定定位 三、普通流定位 页面中元素的默认定位方式,默认文档流,从上往下,从左往右 1、每个元素都在页面有自己的空间 2、每个元素都是从父元素的左上角开始显示 3、块级元素都是按照从 阅读全文
posted @ 2020-10-14 19:32 酷儿q 阅读(126) 评论(0) 推荐(0)
摘要: 如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6(375px 逻辑像素) 的页面尺寸给了 阅读全文
posted @ 2020-10-14 19:31 酷儿q 阅读(630) 评论(0) 推荐(0)
摘要: 在互联网的时代中,网站建设其实是一个非常常见的事情了,几乎每一家企业都希望在互联网上,能够留下属于自己一个足迹,想要拥有一个可以展示自家产品的平台,但是在网站建设的过程中,真的有把每一个过程都做的很好嘛?是达到了自己想要的效果嘛?下面就为一些新手分享一下在网站建中比较常见的问题。 问题一:域名问题 阅读全文
posted @ 2020-10-14 19:29 酷儿q 阅读(470) 评论(0) 推荐(0)
摘要: Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。 #box{ display: flex; width: 500px; he 阅读全文
posted @ 2020-10-14 19:26 酷儿q 阅读(354) 评论(0) 推荐(0)
摘要: 注意:这篇文章描述了一种我们仍需要测其试性能影响的实验技术。 它可能最终会成为一种有用的工具,也有可能成为不被推荐的做法。 无论哪种方式,它对我们来说很有吸引力! 只要我一直工作在 Web 上,就需要一种简单的 html 驱动方式,将另一个文件的内容直接包含在页面中。 例如,我经常希望向页面添加额外 阅读全文
posted @ 2020-10-14 19:25 酷儿q 阅读(126) 评论(0) 推荐(0)
摘要: 基于响应式开发网站,除了页面的布局是我们设计的重点,网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片,我们可以准备多张不同尺寸的图片,然后 阅读全文
posted @ 2020-10-14 19:24 酷儿q 阅读(161) 评论(0) 推荐(0)
摘要: 前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。 动态效果图 这个 Demo 是不断重复地设置文字的大小和透明度,这些英文字母也是我自己利用 HT 阅读全文
posted @ 2020-10-14 19:22 酷儿q 阅读(570) 评论(0) 推荐(0)
摘要: 1、绝对定位 position:absolute; 绝对定位指的是通过规定html元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值,则相对于整个网页。 <!DO 阅读全文
posted @ 2020-10-14 19:21 酷儿q 阅读(212) 评论(0) 推荐(0)
摘要: 网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢?本文为你提供一份大型php网站性能和并发访问优化方案. 一、大型网站性能提高策略: 大型网站,比如门 阅读全文
posted @ 2020-10-14 19:16 酷儿q 阅读(215) 评论(0) 推荐(0)
摘要: 在许多谈及网站或Web应用开发的场合,开发人员最为关心的莫过于跨浏览器的兼容性问题。如您所知,诸如:计划、设计、测试等大多数工作都可以在网站的开发阶段顺利完成。但是跨浏览器兼容性问题则会持续到网站上线之后。例如:也许您已经在Mozilla Firefox、Internet Explorer、以及Ch 阅读全文
posted @ 2020-10-14 19:12 酷儿q 阅读(1824) 评论(0) 推荐(0)
摘要: 老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案,有没有一款适合你去探索?本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案,纯前端方案也会部分提及。 常用的加速方法 说起 H5 性能优化方案,是个老生常谈的话题,通常的 web 优化方法,基 阅读全文
posted @ 2020-10-14 19:10 酷儿q 阅读(296) 评论(0) 推荐(0)
摘要: css transitions 提供了一种在更改css属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率 阅读全文
posted @ 2020-10-14 19:09 酷儿q 阅读(121) 评论(0) 推荐(0)
摘要: css 值的解析 css 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。 我们可以使用 CSS 选择器,为选中的元素设置需要的样式。 在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己 阅读全文
posted @ 2020-10-14 19:06 酷儿q 阅读(137) 评论(0) 推荐(0)
摘要: 瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对 阅读全文
posted @ 2020-10-14 19:04 酷儿q 阅读(473) 评论(0) 推荐(0)
摘要: 很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点! 网页生成过程: html被html解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DO 阅读全文
posted @ 2020-10-14 19:02 酷儿q 阅读(346) 评论(0) 推荐(0)
摘要: 最近在做知识体系的复盘,在复盘的时候尽可能的查漏补缺。关于@import和link引入样式的区别网上有很多种说法。大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下。 区别 1.从属关系区别 @import是 css 提供的语法规则,只有导入样式表的作用;link是html提供的标签 阅读全文
posted @ 2020-10-14 18:57 酷儿q 阅读(485) 评论(0) 推荐(0)