-
物联网 IOT 设备如何脱离信息孤岛？
以下内容为本人的学习笔记，如需要转载，请声明原文链接微信公众号「englyf」https://mp.weixin.qq.com/s/tb5eOFNUZLtPPLipLAh3vA本文大概1435个字，阅读需花4分钟内容不多，但也花了一些精力如要交流，欢迎评论区留言谢谢你的点赞收藏分享目前在家庭物联网这
-
记录--Vue开发历程---音乐播放器
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助一、audio标签的使用1、Audio对象属性 2、对象方法二、效果效果如下：三、代码代码如下：MusicPlayer.vue?123456789101112131415161718192021222324252627282930
-
教你用JavaScript实现调皮的字母
案例介绍欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用JavaScript编程实战案例，制作提高打字速度的小游戏-调皮的字母。点击与屏幕上字母相对应的按键，若按键与出现的字母一致，则可以获得相应的分数。案例演示根据屏幕上随机出现的字母来点击键盘上对应的按键，可自行调节字母下落的速
-
CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习
前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。 css中margin外边距（重叠）合并现象css中margin外边距穿透现象css中ma
-
教你用CSS实现表单部件
案例介绍欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用CSS编程实战案例，使用列表标签完成一个下拉菜单样式的表单部件。案例演示运行代码后在浏览器弹出由标签组成的下拉菜单样式的列表。源码学习进入核心代码学习，我们先来看HTML模板中的代码。<!--有个小院-兴趣编程-->
-
HTML & CSS 设计原则
设计原则DesignPrinciple响应式设计Responsive响应式设计的意思是网页能够根据其显示在的屏幕的大小自动伸缩。响应式设计使得对笔记本和手机用户更加友好。分辨率的计算：宽度*高度，最常见的屏幕分辨率是1920px*1080px。响应式设计三大技术:Flexiblegrids灵活网格：
-
单标签实现复杂的棋盘布局
最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：他用了60多个标签，而他的同学，只用了6个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑DOM的消耗的同时，也需要关注代码的可读性，以及后续基于这个
-
HTML5 移动设计基础
桌面网站设计多是固定布局或流布局，而移动网站中我们应该使用流体布局，它可以适应不同设备大小。搭建html框架复制<!DOCTYPE html> <html> <head> &l
-
现代 CSS 高阶技巧，不规则边框解决方案
本文是CSSHoudini之CSSPaintingAPI系列第四篇。现代CSS之高阶图片渐隐消失术[1]现代CSS高阶技巧，像Canvas一样自由绘图构建样式！[2]现代CSS高阶技巧，完美的波浪进度条效果！[3]在上三篇中，我们详细介绍了CSSPaintingAPI是如何一步一步，实现自定义图案甚
-
聊聊前端工作中常用CSS知识点，你掌握了吗？
1.1文字溢出省略号:文字单行溢出:复制overflow:hidden;//溢出隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:nowrap;//规定段落中的文本不进行换行1.2.3.多行文字溢出:复制overflow:hidden;//溢出隐藏text
-
14 个非常实用的CSS属性技巧
学习一些好的实用的CSS技巧，可以帮助我们提供工作效率。因此，今天这篇文章，我将跟大家分享一些很棒的CSS知识技巧，希望对你有用。好了，我们现在开始吧。1.CSS:in-range和:out-of-range伪类这些伪类用于对指定范围内/外的输入进行样式设置。(a):in-range如果input元
-
单标签实现复杂的棋盘布局
最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：他用了60多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑DOM的消耗的同时，也需要关注代码的
-
圆角大杀器，使用滤镜构建圆角及波浪效果！
本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。首先，我们来看这样一个图形：一个矩形，没什么特别的，代码如下：复制div{width:200px;height:40px;background-color:#000;}1.2.3.4.5.如果，我们现在需要给这个矩形的两端加上圆角，像是这样，该
-
一道关于 Box-Sizing 的字节面试题
大家好，我是前端西瓜哥。今天讲讲我很久以前面试字节时遇到的一道CSS面试题。有如下的HTML和CSS样式，问两个块橙色区域宽高分别为多少?复制<style>.box{width:10px;height:10px;border:1pxsolid#000;padding:2px;margin
-
前端: 轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很多便利,我们可以使用css3的新特性实现各种形状和动效，笔者就来带大家介绍如何用css3实现H5-Dooring编辑器中的水波动画。由于生成gif的工具比较弱(在线求好用的mac版gif录频生成工具...),我不得不上传个原图,大家自行脑补.接下来我们来研究实现原理和实
-
阴影进阶，实现更加的立体的阴影效果！
CSS阴影的存在，让物体看上去更加有型立体。然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。本文将带大家看看如何使用CSS实现几类比普通阴影更加立体的阴影效果。CSS阴影基础CSS中，明面上可以实现阴影的有三个属性：box-shadow-盒阴影。text-shadow-文字
-
Web Components 系列之 自定义组件的样式设置
本文转载自微信公众号「编程三昧」，作者隐逸王。转载本文请联系编程三昧公众号。前言通过前面的学习，对自定义组件的相关概念和知识点也有了一定了解，今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。直接给自定义标签添加样式index.html：复制<style>my-card{di
-
TQL，巧用 CSS 实现动态线条 Loading 动画
今天，有群友问我，使用CSS如何实现如下Loading效果：这是一个非常有意思的问题。我们知道，使用CSS，我们可以非常轻松的实现这样一个动画效果：复制<div></div> 1.复制div { w
-
纯CSS从三角形进化到六边形
今天要学习一下面试中常考的一个css题目，用css画多边形。这一次以三角形、四边形、五边形、六边形为例，首先开始之前需要了解一些必要的知识。一、基础知识储备本次将利用纯CSS知识来绘制一些形状，为了绘制这些形状，首先补习一下所需的CSS基础知识点——css盒模型。盒模型.png由上图可以
-
45个值得收藏的CSS形状
CSS能够生成各种形状。正方形和矩形很容易，因为它们是web的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用CSS伪元素中的::before和::after，这为我们提
