前端
文章平均质量分 94
当我发布一些前端相关内容,却没有专栏可以容纳时,我会暂存在这里。
我不是费圆
不积跬步无以至千里,不积小流无以成江海
展开
-
CSS 图片遮罩学习小节
概念:-webkit-mask-image是一项用于制作镂空图形和图形遮罩效果的CSS样式属性。做这个效果时考虑了 keyframes、transform等方式重新绘制遮罩层,结果都失败了。-webkit-mask-image 的起源很早,但兼容性不好,因此用途并不广泛。-webkit-mask-image 的值既可以是渐变色也可以是图片地址。·这个动画的关键属性是:-webkit-mask-size。·它在原遮罩层的基础上进行缩放时,图案会同步改变。/* 设置遮罩 *//* 设置底色 */原创 2024-01-23 16:37:23 · 1350 阅读 · 1 评论 -
我眼中的鸿蒙
智能终端操作系统 鸿蒙系统可以和安卓实现相互兼容,用户升级鸿蒙系统之后,之前手机上的数据也会被一并保存下来。HarmonyOS 鸿蒙,亦作“鸿濛 ”。中国神话传说的远古时代,传说在盘古开天辟地之前,世界是一团混沌状,因此把那个时代称作鸿蒙时代,后来该词也常被用来泛指远古时代。 鸿蒙的优点在于它不止是一款手机系统,还能够适配其它智能设备,比如说手表、平板和电脑等。用华为自己的话来说就是,鸿蒙OS打破了不同平台、不同设备之间的阻隔,无论设备大小,只要一款系统就能轻松搞定,无疑是更加方便。原创 2021-06-20 21:36:01 · 723 阅读 · 2 评论 -
网页精准布局,学会受用一生
昨天有同学问这个如何布局,细节就不描述了,反正很着急,我大致看了一眼,两分钟把答案整了出来,有注释有效果图,当键盘声停下需求也就做完了。 无论哪种网页布局,首先统筹全局,从最外侧开始看,如图: 我们先分左右后分上下,比如最外侧是:侧边栏、内容;内容区域有:导航栏、头部、内容;内容中再分侧边栏与内容。结合代码一目了然:<!-- 最大父元素 --><div class="box flex"> <!-- 弹性盒子布局 --> <div class.原创 2020-12-01 09:11:54 · 533 阅读 · 0 评论 -
Vue语法糖
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。 语法糖对程序员来说是友好的,但对机器本身却不怎么好。语法糖越甜,编译成的二进制也就越麻烦,出错的时候也会带来更多的麻烦。程序员要做的不是尽力避免错误,而是聚焦在快速发现并改正错误。真正以快速方式轻易解决错误原创 2020-10-26 19:12:18 · 2339 阅读 · 0 评论 -
郑州网易分公司前端面试题(花钱也买不到)
1. clear:left 具体指什么? W3C标准解释:2. 如果父元素拥有transform属性,子元素的“固定定位”会转换为“绝对定位”: {position: fixed;} → {position: absolute;}3. 元素垂直居中的方式: “ 点这里 ”4. 什么是BFC,如何触发? BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block参与, 它规定了内部的Block如何布局,并且与这原创 2020-10-25 14:39:05 · 1464 阅读 · 4 评论 -
垂直居中的 8 种方式
有些方式只适用于行内元素,有些方式适用于所有元素,把我胸中韬略,一一展现。1 所有元素line-height居中: 子元素{line-height:父元素内容高度} 或 子元素{font:24px/父元素内容高度 楷体;}2 所有元素margin居中: 子元素{margin-top:父元素内容}...原创 2020-10-24 22:19:49 · 5193 阅读 · 1 评论 -
Dom树 CSS树 渲染树(render树) 规则、原理
前端不可不学的浏览器渲染机制,阿里年年问,去一个栽一个。听说百度也在考这个,你还不准备学吗?首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染什么是dom 树? 浏览器将HTML解析成树形的数据结构,简称DOM。 DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示,同时也是外部内容(例如 JavaScript)与 HTML 元素之间的接口。 解析树原创 2020-10-11 18:39:54 · 18414 阅读 · 51 评论 -
CSS全屏换肤
50行代码换5种肤色,包含透明先把代码奉上,自取自用。直接创建html文件,直接粘贴进去就能用,不能用随便骂。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width: 400px;height: 400px;background-color: red;bor原创 2020-08-12 19:50:03 · 6074 阅读 · 45 评论 -
display , visibility
display: none; 与 visibility: hidden; 的区别:相同: 它们都能让元素不可见区别:display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility:hidden;是继承属性,子孙节点消失由于继承了 hidden,通过设原创 2020-08-15 17:49:03 · 901 阅读 · 12 评论 -
Canvas基础教程(章节3)
这节主讲 Canvas 绘制贝塞尔曲线,首先我们要了解 什么是贝塞尔曲线? 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线, 是应用于二维图形应用程序的数学曲线。 一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。 贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop 等。在Flash4 中还没有完整的曲线工原创 2020-10-04 23:59:54 · 1872 阅读 · 3 评论 -
Canvas基础教程(章节2)
发现一个好玩小技巧,如果浏览器不支持 Canvas 画布怎么办?别这样写,太 low 了试试这个 ????哇哦,我学会了。来吧!开始今天的学习内容渲染上下文 < canvas>会创建一个固定大小的画布,会公开一个或多个 渲染上下文(画笔),使用 渲染上下文来绘制和处理要展示的内容。 我们重点研究 2D渲染上下文。其他的上下文我们暂不研究,比如, WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。//获得 2d 上下文对象原创 2020-10-03 14:38:30 · 2459 阅读 · 9 评论 -
我听到的鸿蒙
鸿蒙 道教神话传说的远古时代,传说盘古在昆仑山开天辟地之前,世界是一团混沌的元气,这种自然的元气叫做鸿蒙,因此把那个时代称作鸿蒙时代,后来此一词也常被用来泛指称远古时代。四大名著《西游记》第一回中,也有“自从盘古破鸿蒙,开辟从兹清浊辨”的描述。发展历程 2012年12月,华为在芬兰设立研究中心,开始规划自有操作系统“鸿蒙”。 2019年5月17日,由某教授领导的华为操作系统团队开发了自主产权操作系统——鸿蒙。 2019年5月24日,国家知识产权局商标局网站显示,华为已申请“华为鸿蒙”商标原创 2020-10-02 23:54:08 · 11546 阅读 · 2 评论 -
Canvas基础教程(章节1)
这是我的第一篇Canvas 基础教程,我先简述一下什么是Canvas 。 H5 新增内容,允许脚本语言动态渲染图像,是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域,类似于其他通用的二维 API,通過一套完整的绘图函数来动态生成图形。一些可能的用途,包括使用 Canvas 构造图形,动画,游戏和图片。Canvas 对象的属性height 属性: 画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变原创 2020-10-02 22:54:32 · 1813 阅读 · 7 评论 -
移动端尺寸问题
移动端尺寸问题我们知道,前端页面的基本单位有px,rem,em,px是PC页面常用的基本单位,相对的rem是移动端常用的基本单位;而em适用于PC和移动端,他的计算方式是以父节点的宽度来定义自身em的长度,因为不利于精准计算,所以不常用。今天要讲的是移动端里的rem我猜大家遇到过这样一个问题:我用测量工具量取的宽度是1rem ,可写到项目里,明显比原网页要窄很多。这就是今天要讲的尺寸问题像素(图像最小的不可被分割单元)分辨率:720*1280表示横向可容纳750个像素,纵向可容纳1280个原创 2020-09-11 00:08:42 · 494 阅读 · 14 评论 -
学习mockjs
什么是mockjs 前后端分离(让前端攻城师独立于后端进行开发) 增加单元测试的真实性(通过随机数据,模拟各种场景) 开发无侵入(不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据) 用法简单(符合直觉的接口) 数据类型丰富(支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等)方便扩展(支持支持扩展更多数据类型,支持自定义函数和正则)安装npm install mockjs使用 Mockvar Mock = require('mockjs原创 2020-09-07 21:30:56 · 1735 阅读 · 0 评论 -
Vue组件基础--简单了解vue组件
Vue组件基础–简单了解vue组件Vue组件是什么?组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:data (数据存放)computed(计算属性)watch(监听属性)methods(方法存放)熟悉的人应该看出来了,组件并没有el属性,组件没有根节点相关的属性。组件的data必须是一个函数,这样多个组件才不会相互影响。data: function () { return { count: 0 }}组件可以通过Prop原创 2020-09-03 08:45:34 · 3154 阅读 · 16 评论 -
织梦验证码问题
网站是个好网站,但资费问题太久没有更新了,上次更新是18年1月9日,直接说解决方法吧就类似这样的图,验证码一直刷新不出来。打开data文件夹,打开safe文件夹,打开inc_safe_config.php文件,把$safe_gdopen = ‘1,2,3,4,5,6,7’;里面的 6 删掉,保存退出,重启phpStudy,刷新网页验证码就消失了,再也不用填了。...原创 2020-08-24 20:19:47 · 408 阅读 · 0 评论 -
摸过键盘就能学
什么是HTML文档,我发的CSS、JS源码如何加载?用过word文档,或者写过ppt就能学会,学不会我就隐退。看到这两个文档了吧!用过其中之一就能学会如何加载页面。当然,想通过本文理解代码含义且自行编写那不可。这里的“ .docx ”和“ .pptx ”我们称之为“文件后缀名”。如果你发现自己的文件下没有后缀名,请做以下操作:这个年代,大家的电脑应该都是win10操作系统了,部分linux什么的来不及细说,请大家浏览我的博客,linux相关博客里有详细记原创 2020-08-22 23:47:45 · 5451 阅读 · 33 评论