响应式设计旨在编写一套代码,在不同设备上都能有良好的表现。响应式设计有两种思路:桌面端优先和移动端优先,它们的区别是先实现一种布局,再使用媒体查询设置断点,实现不同屏幕尺寸下的布局,逐渐过渡到另一端。即由大到小和由小到大的区别。 ...
当有多条冲突的CSS规则指向同一元素,则浏览器会计算特异性选择更具体的规则。如果特异性相同,则按照代码顺序,靠后的规则覆盖前面的规则。 ...
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:佳岚 The more your tests resemble the way your software is used, the more confide ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何实现一个雨滴落下效果 前言 下雨天坐在车窗前,看着雨滴顺着车窗渐渐落下,这一唯美的场景,忍不住想记录下来。最近在纠结电脑壁纸时,无意间看到有类似的场景,可以将自己喜欢的壁纸加上这种效果。作为多年切图仔,不由地想到了用css动画应该可以 ...
XPath 通常用来进行网站、XML (APP )和数据挖掘,通过元素和属性的方式来获取指定的节点,然后抓取需要的信息。 学习 XPath 语法之前,首先了解一下一些概念。 概念介绍 节点之间的关系 以上面的 HTML 节点树为例,节点之间包含了下列的关系: 父节点 (Parent): HTML 是 ...
废话不多说,龙年腾云特效送给大家 预览 在线预览 龙年腾云 源码 龙是使用的 svg,你也可以替换成其他样式的龙,而云是图片转化成的 base64 编码,所以整个文件就是一个 html。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
禁止远程字体的作用 作为程序员,日常工作中我们可能经常需要打开国内外许多不同的网站寻找教程,但是很多国外网站,特别是基于WordPress的博客,往往会使用Google字体,这是使得我们访问这些网站的时候会自动尝试加载这些字体,而严重影响打开速度。这时候我们可以考虑禁止所有的远程字体以加速访问。虽然 ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 PM:在PC端做一个@功能吧,就是那种...。 我:你不用解释我知道那个功能,监听keydown事件,然后e.keycode 50,那可太简单了。 那可太简单了,可太简单了,太简单了,简单了,单了,了......(掉进坑里的回声) 坑 ...
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:修能 生产力工具 + AI 是不可逆转的趋势,慢慢的大模型能力通过 AI Agent 落地的工程化能力也开始趋于成熟。作为大数据产品的数栈也必然是需要借助 A ...
最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果: 该效果的几个核心点: 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H ...
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 翻转图像是在视觉上比较两个不同图像的常用方法。单击其中一个将翻转它,并显示另一个图像。 布局 布局结构如下: <div class="flipping-images"> <div class="flipping-images__inner ...
在接入小程序过程中会遇到需要将 H5 页面集成到小程序中情况,今天我们就来聊一聊怎么把 H5 页面塞到小程序中。 本篇文章将会从下面这几个方面来介绍: 小程序承载页面的前期准备 小程序如何承载 H5 小程序和 H5 页面如何通讯 小程序和 H5 页面的相互跳转 小程序承载页面的前期准备 首先介绍下我 ...
可以少去理解一些不必要的概念,而多去思考为什么会有这样的东西,它解决了什么问题,或者它的运行机制是什么? 1. 弹性盒子布局概念 Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。比如: .box{ displ ...
网页的生成过程 解析HTML,生成DOM树。 解析CSS,生成CSSOM树。 结合DOM树和CSSOM树,为每一个节点计算CSS属性,生成渲染树,RenderTree。 生成布局(Flow),计算渲染树上所有节点的位置。 将布局绘制(Paint)到屏幕上。 布局生成和绘制的过程就是渲染。 网页生成的 ...
前言 通天塔搭建页项目是用来搭建各类活动页面,比较老且业务复杂的项目,可优化点还是非常多的。今年侧重对运营页首屏加载的性能优化,在保证系统稳定可控、需求持续迭代前提下,最终提升了58.8%速度。 回顾一年的不断探(cai)索(keng),得出的感受的是: 选择大于努力了,努力的方向不对,想取得成果就 ...
1 前言 自网站诞生以来,页面白屏时间、用户交互的响应速度等一直都是开发者关心的问题,这直接影响了一个网站能否为用户的浏览提供舒适的服务,而这种舒适度,直接关系着对用户的吸引力,毕竟谁都不能忍受一个页面长达10秒的空白屏时间,更别说点击按钮后,页面长时间的毫无反应。 web 的性能一定程度上影响了用 ...
写在前面 在很久很久以前,网页布局基本上通过table 元素来实现。通过操作table 中单元格的align 和valign可以实现水平垂直居中等 再后来,由于CSS 不断完善,便演变出了:标准文档流、浮动布局和定位布局 3种布局 来实现水平垂直居中等各种布局需求。 下面我们来看看实现如下效果,各种 ...
本文于2017年2月底完成,发布在个人博客网站上。 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来。 查看当前nginx的编译选项 #./nginx -V nginx version: nginx/1.9.15 built by gcc 5.4.0 20160609 ( ...
本文于2017年2月中旬完成,发布在个人博客网站上。 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来。 Google开源Brotli压缩算法 Brotli是一种全新的数据格式,可以提供比Zopfli高20-26%的压缩比。 在caniuse网站查询当前主流浏览器对bro ...
本文于2016年4月底完成,发布在个人博客网站。 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来。 从源码安装nginx 下载软件 编译nginx,必备pcre,zlib,由于jackie打算研究HTTPS,所以还需要openssl。 wget https://www. ...