随笔分类 - Html5
摘要：# js实现拖拽上传带遮罩层 > 需求是一个类似于拖入文件到聊天框的需求，拖入文件到聊天框时，出现遮罩层，松开树表时，上传文件，移除时，关闭遮罩层。可查看微信的拖入拖出 此前以为很简单，后来发现一个令人头疼的问题是：当监听的元素嵌套了很多子元素后，当文件拖入进来后，你就会发现enter和leave会
阅读全文
摘要：linux（CentOS）服务器搭建 前言 拿到购买的服务器信息后，会给出一个服务器的账号的密码，看你自己设置，账号一般为root。 拿到后，可在阿里云官网登录进入服务器。然后就可以进行一下的流程从而完成配置。这里博主的服务器采用的CentOS。 流程 下载JDK到本地 https://www.or
阅读全文
摘要：温馨提示：一下css封装，建议按需使用，否则会造成很大的代码冗余，且很多样式会造成不符合预期的效果，建议合理使用 <a href="https://meyerweb.com/eric/tools/css/reset/">Reset.css</a> function.css /* 禁止选中文本 */
阅读全文
摘要：一般书写大量文本内容时，我们一般都需要写下如下代码： text-indext:""; //首行缩进 white-space: normal; //文本内容一行显示 white-space: no-wrap//强制换行 word-wrap: break-word; = word-break: brea
阅读全文
摘要：will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。 举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页
阅读全文
摘要：CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。 /* Keyword values */touch-action: auto;touch-action: none;touch-action: pan-x;touch
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函数_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="J
阅读全文
摘要：根据MDN上的解释如下： CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时，SVG内容表现如同visiblePainted。 除了指定元素不成为鼠标事件的目标，none值还指示鼠标事件穿过该元素，并指向位于元素下面的元素 语法： po
阅读全文
摘要：:placeholder-shown 另外，划重点，这个伪类是仍处于实验室的方案。也就是未纳入标准，当然我们的目的是探寻有意思的 CSS 。 当 input 类型标签使用了 placeholder 属性有了默认占位的文字，会触发此伪类样式。 配合:not()伪类，可以再改变当默认文字消失后的样式，再
阅读全文
摘要：:target 伪类选择器 :target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。 解释很难理解，看看
阅读全文
摘要：1.盒子边框的线条动画： <div class="cont"> <div class="bb"></div> </div> .bb{ position: relative; width: 200px; height: 200px; background: #666666; border: 1px s
阅读全文
摘要：css3中对于伪元素的使用，在项目开发中使用得当将会对代码的可读性又很大的提升。但是对于伪类大家或许都知道是一些选择器的使用，这里总结了关于伪元素中单冒号和双冒号的区别： 再官方定义中规定单冒号都为伪类，是一种选择器 eg: a:first-child{} a:nth-of-type(2) {} a
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方体动画</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,f
阅读全文
摘要：beginPath() 对画线点的一个开始限制 moveTo() 画线的起点，只在开头使用 参数两个x轴，y轴 lineTo() 后续连线 两个参数x轴，y轴 stroke() 连线无填充 fill() 填充，默认黑色 closePath() 对画线点的一个结束限制 自动起着连接起点的作用 begi
阅读全文
摘要：save() 样式不受污染的起始范围 shadowOffsetX 阴影x轴的距离 shadowOffsetY 阴影y轴的距离 shadowBlur 模糊度 shadowColor 阴影颜色 restore() 保护样式不受污染的结束范围 clearRect() 可以理解为橡皮擦 参数四个：x轴，y轴
阅读全文
摘要：lineWidth 设置边框的大小 fillStyle 设置div的颜色 strokeStyle 设置边框的颜色 lineWidth 设置边框的大小 设置边框的大小 fillStyle 设置div的颜色 设置div的颜色 strokeStyle 设置边框的颜色 设置边框的颜色 注： 边框在不设置的情
阅读全文
摘要：<canvas>元素主要用来图形的绘制，通过脚本来完成（通常时js来实现）； 可以利用其实现图表，游戏等项目的开发。 getContext 获取画布的摸板是2d还是3d strokeRect(x,y,w,h); 四个参数： x轴，y轴，宽度，高度 主要用来设置边框，可以理解为border fillR
阅读全文
摘要：IE浏览器内核：Trident内核，也是俗称的IE内核； Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； Firefox浏览器内核：Gecko内核，俗称Firefox内核； Safari浏览器内核：Webkit内核； Opera浏
阅读全文
浙公网安备 33010602011771号