如何给 Web 页面增加夜间模式功能？其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素， 解决方法是 添加 DIV，给 DIV 的 outline 属性一个很大的 outline-width 值，用 outline 的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果。
fixed定位的元素是相对于屏幕视口(viewport)进行定位的，当H5嵌入到app的webview中进行展示时，可以理解为：fixed是相对于webview进行定位的。
最近断断续续地写出了这么个东西：http://ucren.com/demos/d3d/index.html。
最近的项目中比较多使用的 ThickBox，今天就简单介绍下，ThickBox 是一个基于 JQuery 类库的扩展，它能在浏览器界面上显示非常棒的弹出框，它可以显示单图片，多图片，AJAX 请求内容或链接内容。 要使用 ThickBox，需要下载三个文件：
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。
本人在学习selenium2java的时候，遇到元素存在但因为被其他元素挡住了，导致无法点击的问题，多方请教后，使用js点击解决了困扰。我又写了几个js点击元素的方法，现在分享出来，供大家参考。
动态时钟，就是通过CSS工具的美化效果和引入JavaScript，让网页呈现出钟表的动态效果，让它能够记录时间。通过改变背景颜色、指针颜色和阴影效果，让时钟呈现不同的颜色。
引言 在现在的前端页面中，尤其是移动端，经常会需要将或者是
1.1 js同步执行与异步执行 js的执行机制：js是单线程环境，从上到下、依次执行，即 同步执行；在这段代码中，for循环是同步代码，setTimeout是异步代码。 js在执行代码的过程中，碰到同步代码会依次执行，碰到异步代码就会将其放入任务队列中进行等待，当同步代码执行完毕后再开始执行异步代码，即 异步执行。
一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。 手机
题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。
此例子来自Bootstrap官网提供的入门级模版。只有基本的东西：引入了预编译版的 CSS 和 JavaScript 文件，页面只包含了一个 container 元素。
有些网站，在你没有登录的时候，会弹出一个强制登录的浮动层。挡住正文内容，又没有关闭按钮，必须登录才能消失。如下图所示：
一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”
opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。
鼠标移入div，显示菜单ul，移出后隐藏菜单ul，只使用CSS，如何实现既有淡入淡出的效果，而又不影响其他元素，不产生回流？
一、简单介绍 1、html，是hyper text markup language的缩写，中文为“超文本标记语言”。 2、html不是编程语言而是一种标记语言。 二、标签与元素 1、html标签：如(两个尖括号加上一个元素名，是开始标签,是结束标签)。 2、html元素：元素内容（开始与结束标签加上内容）。 3、一般的html标签都有开始和结束标签，但是有些是空标签，即没有结束标签和元素内容。如<link012
经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。
02
感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬。
作者：钱得乐 链接：https://juejin.cn/post/7141012605535010823
网络文学是以互联网为展示平台和传播媒介，借助相关互联网手段来表现文学作品及含有一部分文字作品的网络技术产品，在当前成为一种新兴的文学现象，并快速兴起，各种网络小说也是层出不穷，今天我们使用selenium爬取红袖天香网站小说数据，并做简单数据可视化分析。
博客于今日开通，在这网络资源日益丰富的年代，曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了，顺便记录下成长的经历，共勉。
在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些DOM元素发生的这些事件。
众所周知，蓝鲸平台是一个功能强大的智能运维管理平台，我们可以运用平台能力提高运维工作效率，我们也可以开发搭建属于自己的SaaS工具。
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
双十一剁手节过去了，大家应该在很多网页中看到了数字翻牌的效果吧，比如倒计时、数字增长等。相信很多人都已经自己独立实现过了，我也在网上看了一些demo，发现HTML结构大多比较复杂，用了4个并列的标签来放置前后两个“牌”。本文就来讲解下，如何进一步精简HTML，让结构简单，让JS方法封装得易使用。先来看看最终效果：
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。
使用html5或者jQuery如何实现文本框下拉效果，如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id 然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。 在 datalist 标签下放列表项。
作者最近一段时间在做 H5 聊天项目，过程中踩过一个大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。作者实验了一些机型，发现了一些问题，并且逐一探索了解决方案分享给大家。
相信经常刷 b 站视频的小伙伴，应该能注意到网友发的弹幕遇到人物时，并不会遮挡住人。
前言： 这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学CSS，我一直以为它是个精灵图之类。😂 我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。 文章如若有那些不足之处，请及时指出，在此郑重感谢。 一、CSS三角做法 我们先简单说一下，如何把三角画出来，懂用什么画的之后，基本就完事了。 html代码： css代码： .sanjiao { /* 为了好看让它居中 */ m
今天又遇到了一个非常奇葩的问题，在微信打开 H5 页面，拉到底，会抖动，右侧一半被白色的东西挡住， checkbox 多选框移位等，莫名其妙。如图：
最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题：
一、光标 新增加not-allowed光标，不允许访问 隐藏光标，在触模应用上很有用，css2.1需要一个透明的图片来实现，而css3直接用cursor:none即可。 完整代码： curosr: url(transparent.gif'); cursor: none; 二、扩大热区 应用在小按钮的情况下，不好被鼠标点击到 代码如下： .btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute
每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。
元素能够正常位于弹窗更前方。演示中的对话框是一段超时警告，提示用户按下按钮，否则会在一份复杂表单的第 14 步（共 72 步）中被注销。
li{margin-bottom:-1px;background:#fff;}//background是我自己发挥的，但是还是设置上比较好
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1. 固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，
当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。
来自：掘金，作者：钱得乐 链接：https://juejin.cn/post/7141012605535010823 那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。 高端的效果，往往只需要采用最朴素的实现方式，忙碌了两个小时，陈师傅打开了F12，豁然开朗。一张图片+一个属性，直接搞定。 为了印证我的想法，我决定自己写一个demo <!DOCTYPE html> <html lang="en"> <head> <meta charset=
本人学生 🐶, 平时在外面没事接点小项目小赚一笔补贴生活费. 之前一直都是使用Vue2.x的版本做项目, 暑假刚刚学习了Vue3想着新项目就直接用Vue3上手. 效果展示 好了, 话不多说先给大佬们看看效果样式: 组件难点 因为下拉框可能会在某些情况下被挡住, 所以这里的下拉框被挂载到了body标签上, 并且下拉框中的选项往往是以<slot>插槽的形式编写, 这里就会困扰到很多小白, 搞不明白怎么样才能在 下拉框 与触发下拉按钮 之间关联响应式事件与数据. 组件的使用 <tk-select selec
dataTable 的搜索框 请参阅dataTable dom：http://www.datatables.club/reference/option/dom.html
问题：然后利用new Date() 转换时间戳时，使用微信开发工具、安卓都没问题，ios中无法展示并报错 “invalid date”。
这周刚好看到一个大眼的玩具，感觉非常有意思。但是只能放在自己的网页上又感觉缺乏使用场景。因此我想到能把他翻成chrome插件，注入到平常浏览的网页上，这样使用场景就丰富了。
原文：intro-to-vue-5-animations 译者：nzbin 译者的话：经过两周的努力，终于完成了这个系列的翻译，由于时间因素及个人水平有限，并没有详细的校对，其中仍然有很多不易理解的地方。我和原作者的初衷一样，希望大家能够通过这个系列文章有所收获，至少可以增加学习的乐趣，我也在学习的路上，所学心得必将与大家共勉。 这是 JavaScript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分，我们将学习动画（如果你了解我，你知道这一章迟早会来）。这个系列教程并不是一个完整的用户手
css堆叠上下文不知道在你的业务中有没有遇到过，前段时间搭建vuepress1.0就遇到这样的一个类似的问题，主要是用了vuepress-reco这个主题,去官方提了一个issue[1],自己提的issue最后自己找到原因了，但是还是有小伙伴遇到同样的类似问题,今天一起探讨一下css堆叠上下文的问题
上图中可以看到，h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
