每个Web开发人员都应该知道的七个CSS核心概念
“盒子”基本上是HTML元素的构建块,它由四个主要块组成:边距(margin)、边框(border)、填充(padding)和内容(content)。2.1、边距边距在所选元素及其周围的所有元素之间添加空白空间,并且不会影响元素内容的大小。现在有个巧妙的小秘密,从边框的外边缘开始,margin-top将选定的元素向下推动而不移动其他元素,而...
我是这样用“色”做设计的 !|渐变|配色|明度|色板|色相_网易订阅
彩色文字会告诉用户可以点击的文字链接,而灰色的按钮则会让用户认为此按钮不可点击。整体思考色彩在设计中的构成元素图形化用户界面,用户在看到一个界面时,是一个由背景色、矩形按钮及图标ICON设计、卡片等设计元素构成的。在设计界面时,借助色彩可以直观的展示背景色、导航栏、状态栏和操作按钮等构成的设计元素,...
300 多行代码搞定微信 8.0 的“炸”“裂”特效!
先看底部操作栏容器的整体布局,使用grid布局把表情选择按钮、消息发送框和发送按钮分成3列,其中除消息发送框为浮动宽度外,其它的两个按钮为固定宽度,默认居中对齐,最后设置阴影和间距:表情选择按钮把自己进行了靠左对齐,并设置相对定位,用于定位表情选择弹出层,然后设置按钮图标的大小:表情选择弹出层的CSS代...
前端必会!四步带你吃透浏览器渲染基本原理
当HTML文档解析过程完毕后,浏览器继续进行标记为deferred模式的脚本加载,然后就是整个解析过程的实际结束触发DOMContentLoaded事件,并在async文档文档执行完之后触发load事件。2.生成Render树生成DOM树的同时会生成样式结构体CSSOM(CSSObjectModel)Tree,再根据CSSOM和DOM树构造渲染树RenderTree,渲染树包含带有颜色,尺寸...
2018 年主流 RSS 服务选哪家?Feedly、Inoreader 和 NewsBlur 横评
此外,主界面侧边栏中也设置了一个「统计」入口,点击后可以看到针对你所有订阅的统计信息。当然,如此密集的功能排布在美观性和操作便捷度上必然是有所妥协的;我至今都很难记清这些功能的入口分别在什么地方。NewsBlur的添加订阅入口是左下角一个小小的加号,点击后弹出的输入框也同时支持搜索和直接贴入URL,但不...
程序猿必备的8款web前端SVG动画特效
之前我们分享过几个漂亮的HTML5蝴蝶飞舞动画,比如超炫酷HTML5Canvas蝴蝶飞舞动画和HTML5SVG3D蝴蝶飞舞动画都非常炫酷(www.e993.com)2024年10月19日。今天要分享的这款蝴蝶动画是基于纯CSS3的,虽然没有前面蝴蝶动画那么绚丽,但是蓝色的蝴蝶翅膀扇动起来也是别有一番风味的。4、SVG边框可连续变化的鼠标滑过动画按钮...