在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？今天，我将向大家介绍两种强大的工具——油猴脚本和浏览器插件，通过它们，我们可以轻松地改造现有网站的界面和交互体验。
本文设计到的css属性有background、inline-block、line-height
看过很多博客、微博和QQ空间里面，很多人都给自己的小窝设置了固定背景，不随浏览器滚动，实现的方法除了Javascript，CSS也可以轻松实现。
本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。
assets下含有image , js ,css3个文件， 分别放各个资源文件
> 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整
width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地址范例
今天是3月12号，来学习一下视差滚动。 严格来讲，它其实是一种网页效果，而不是一个前端组件，顶多是一个插件。 插件，一般是用来实现网页上的一个或多个功能。 而组件，是为实现网页的业务逻辑，而封装的一组功能代码。它一般是特定的，不特别的强调通用性。 //============ 视差滚动（Parallax Scrolling） parallax[ˈpærəˌlæks] n. 视差（量），视差角度; 它是一种比较优雅酷炫的页面展示的方式， 今天咱们研究下视差滚动的原理和实现方式。 视差的原理， 视差就是从有一定
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部
背景：我采用了videojs视频播放器。视频播放页面是一个独立页面 包含了html5播放器代码。 主页面采用iframe 调用视频播放页面。
1.菜单悬停效果的展示 一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天，我们希望与您分享一些菜单悬停效果。我们希望这一套启发你，并为你的下一个项目提供一些想
在如今在线会议、网络教学盛行的时代，员工和学生被要求打开摄像头，将自己、居住环境、隐私暴露在公众视野中。背景虚化、虚拟背景应用恰恰可以解决这一问题，而人像分割技术正是背后支撑这些应用的关键技术。 有读者可能疑惑，Native环境下的背景虚化、虚拟背景技术已经存在多时了，把它直接迁移到Web端能有多难呢，我们今天就从这个问题出发，展开聊聊。 与Native相比 Web端进行实时人像分割有何不同 相比于Native端的AI推理任务实现，目前Web端实现时有如下难点： 模型轻量：Native端可以在软件包
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
作者：matrix 被围观: 2,616 次 发布时间：2013-10-09 分类：Wordpress 兼容并蓄 零零星星 | 2 条评论 »
CSS3 基础知识 1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展) box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影) 1.3 边框图像 border-image 2.背景 2.1 background-size background-size:30px 30px;(背景图像宽度，背景图像高度) 2.2 background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变，和background-size一起用) 2.3 background-attachment:(fixed|scroll|local) fixed： 背景图像相对于窗体固定。 scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。 2.4 background-position:30px 20px;(横坐标，纵坐标；是图片在动) 2.5 background-origin:(padding-box|border-box|content-box) padding-box： 从padding区域（含padding）开始显示背景图像。 border-box： 从border区域（含border）开始显示背景图像。 content-box： 从content区域开始显示背景图像。 3.文本 3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平，垂直，模糊) 3.2 换行 word-wrap:(normal|break-word) normal： 允许内容顶开或溢出指定的容器边界。 break-word： 内容将在边界内换行。如果需要，单词内部允许断行。 white-space:(normal|pre|nowrap|pre-wrap|pre-line) normal： 默认处理方式。 pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象 nowrap： 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 3.3 省略号 width:200px; overflow:hidden; text-overflow:hidden; white-space:nowrap; 4.2D变换 4.1 旋转 transform:rotate(45deg); 4.2 移动 transform:translate(45px,45px);(水平，垂直) 4.3 缩放 transform:scale(2,2);(水平，垂直) 4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转，沿Y轴翻转) 4.5 将以上四个组合在一起 matrix(),需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 暂放 5.过渡 5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] [ transition-property ]： 检索或设
思路大致是这样的,你们也可以根据业务自己封装更复杂的ajax库,比如添加请求响应拦截器
如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。
本文介绍了10个前端开发人员必须关注的实用工具，这些工具可以帮助提高开发效率，包括verb、grid scrolling、Midnight.js、Takana、Basscss、Particleground、Ideal Image Slider、Dimensions、Plain Pattern和Min等。这些工具涵盖了生成工具、JS库、框架和其他实用服务，可以帮助前端开发者更好地进行网页设计和开发。
注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
各位年轻的准布道师们，欢迎你们成功的加入到腾讯犀牛鸟云开发校园技术布道师成长计划中，为了帮助你更快的成长为一个优秀且合格的技术布道师，我特意为你精选出了一些可以辅助你成长的高分书籍。文末有彩蛋~
原文链接：https://blog.csdn.net/qq_43624878/article/details/109993036
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：
当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div)都会默认继承这些属性
背景是这样的,我在用 Safari看hackingwithswift这个网站时,感觉上方的一直固定的红色的和黑色的两条,如下图,太醒目了,于是便想,如何能把它们移除.
前面三篇文章分别从图片伪装、字体反爬、CSS 偏移这 3 个方面，讲解了应对这类反爬网站时的解决方案
注意：当Banner图片完全上移出了浏览器可视区域，此时菜单固定定位在文档的最上方。
网格线未处理之前，默认是这样的，这个背景的网格线，我们现在如果不需要，就去掉吧。 Echarts隐藏背景的网格线属性 yAxis: { splitLine: {show: false}, }, 示例代
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1. 固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，
一、背景样式 在CSS中，背景样式包括两个方面：背景颜色、背景图片。 在Web2.0 时代，对于元素的背景样式，我们都是使用CSS属性来实现。但在Web1.0时代,都是使用background或者 bgcolor这两个HTML属性（不是CSS属性）来为元素定义背景颜色或背景图片。 1.常用背景样式属性 属性 说明 background-color 定义背景颜色。 background-image 定义背景图片地址。 background-repeat 定义背景图片重复。 background-pos
首先讲了移动端和电脑端的一些不同，讲到了viewport的概念和相关的虚拟像素、媒体查询，借助媒体查询来实现横屏、竖屏的区别显示。
老板想要一个小程序的东西，作为实诚却又没干过小程序开发的程序猿，二话不说，撸起袖子，开整。
layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架，不需要各种前端工具的复杂配置，只需面对浏览器本身。
这是《小游戏从0到1设计模式重构》系列内容第9篇，所有源码及资料在“程序员LIYI”公众号回复“小游戏从0到1”获取。
以下内容都是在0.11.112301版本中实践得出。现已更新至0.17.172600，如有版本调整，按实际情况而定，仅供出现类似情况时参考。 1. 快捷键 右键，选择格式化，格式化js、wxml、wxss等代码，也可以用Alt + SHIFT + F快捷键； 2. 知识点 小程序总会在读取Page下的data对象来做数据绑定，这个动作我们称之为A，而这个A动作的执行，是在onLoad函数之后执行的。但是在122100版本以后，this.data做数据绑定的方法已失效，并且也不建议直接通过this.data来
如果仅仅想把导航栏固定，添加以下属性即可： style="position: sticky;" 注：前提是你已经写好了导航栏。 如果想将导航栏下滑悬浮透明，请参照如下方式： 给 header盒子(整个导航的盒子)添加 id="headerTop" 并添加以下css样式： #headerTop{ /*使导航栏固定在顶部*/ position: fixed; top:0; left: 0px; z-index: 1000; /*一开始就不给导航栏设置背景色*/
用Echarts写了一个折线图之后，现在不太喜欢背景网格线的实线 需要改成虚线 Echarts设置背景的网格线为虚线的关键属性 yAxis: { splitLine: {
Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。
前端框架的受欢迎程度每年都在增长， 如今，在较大型或者中型的项目，基本都需要使用框架来进行开发。 前几年，由谷歌发布的Angular和Facebook的React就开启前端框架地位竞争。 但是，在2018年，前端世界发生了重大变化，因为还有一个更强大的选手Vue参加了比赛。
当时遇见这个问题 是医院手麻系统大批量数据展示，由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们
第一章 一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示 （得到内联元素的属性） 1.2 内联元素支持宽高 （得到块的属性） 1.3 没有宽度的时候，内容撑开宽度 （得到内联元
循环精灵图可以不用在给每一个小块一 一的修改位置。 主要原理是找到整张的背景图与li的下标的数学关系 左侧是一大张背景图 右侧是成品是预览图
足迹地图可以展示你过去到访过的地方，以及到访地点的介绍与图片记录，图片点击可以放大显示，同时不同地标的半径大小表示了访问该地点的频率高低，如下图所示：
CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以往完全黑盒的浏览器解析流开始对外开放，开发者可以自定义属于自己的 CSS 属性，从而定制和扩展浏览器的展示行为。
1.1 js同步执行与异步执行 js的执行机制：js是单线程环境，从上到下、依次执行，即 同步执行；在这段代码中，for循环是同步代码，setTimeout是异步代码。 js在执行代码的过程中，碰到同步代码会依次执行，碰到异步代码就会将其放入任务队列中进行等待，当同步代码执行完毕后再开始执行异步代码，即 异步执行。
受到 七夏浅笑 小姐姐博客的启发，决定把自己的视频背景做成固定不动的，本文记录相关内容。 背景 七夏浅笑 博客图像背景固定很漂亮，想模仿类似的效果到自己的博客上 之前已经实现了 Fluid -随机视频背景切换，和封面视频背景顺滑加载，需要在此基础上进行更新 已经实现上述功能的基础版本主题代码 version2.0 目标： 背景视频固定 视频随机切换 优先显示视频预加载图像 不影响博客其余部分正常显示 实现过程 我不是学前端出身，实现功能全屏直觉，为了实现效果抛弃了一切规范和逻辑，实
我们需要实现两个功能，一是点击电影资讯页面上的 “更多” 时，跳转到更多电影页面中，二是跳转时要获取相应的电影类型。
来源：DataFunTalk 本文约1400字，建议阅读5分钟 本文为大家介绍 CVPR 2021 顶会冠军图像分割算法。 以Tesla为首的全球各大新势力造车企业最近简直火的不能再火，过山车似的股价也足以证明各界对自动驾驶行业炽烈的期待！ 而Tesla经过多方面权衡最终采用纯视觉识别的方案，这种方案相比激光雷达方案有更低成本以及更强的统一性。而图像分割技术，作为视觉识别技术中举足轻重的模块，是智能车得以精准区分哪里是路，哪里是人的关键！ 而今天我们要给大家介绍的这个项目，它不仅涵盖业界最主流的DeepL
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
