Css3 | 乐趣区

关于css3:Flutter-开发从-0-到-1七-iPhone-真机调试

Flutter 开发最大的劣势是跨平台，利用 996 下班时间我写了简略的 Flutter 利用，想着怎么运行我的 iPhone 8 下来，理解晓得运行真机须要有苹果开发者，注册苹果开发者须要 99 刀/年，我…… 为了试水，花几百大洋？我不想。如果 Flutter 不能跨平台，用 Flutter 开发那毫无意义，原生开发不香吗。是真的没方法吗？答案：有。 step0 注册苹果开发者首先还是要成为苹果开发者，收费开发者就行！ step1 装置必要插件运行flutter doctor查看是否短少必要插件，次要看 iOS 局部，全部打勾了就肯定能行。 wuxiaolong@WuXiaolongs-MacBook-Pro flutter_andblog % flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel master, 1.24.0-8.0.pre.147, on macOS 11.0.1 20B29 darwin-x64, locale zh-Hans-CN)[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses[✓] Xcode - develop for iOS and macOS (Xcode 12.2)[✓] Chrome - develop for the web[✓] Android Studio (version 4.1)[✓] IntelliJ IDEA Ultimate Edition (version 2017.3.5)[✓] Connected device (4 available) ! Doctor found issues in 1 category.step2 连贯手机将 iPhone 连贯到电脑，Android Studio 下面会显示你的真机，抉择你的真机设备，筹备运行。 step3 Xcode 配置在 Flutter 我的项目点击 ios > Runner 文件夹下的任意文件，点击“Open iOS module in Xcode”，关上 Xcode。在 target 设置页面 Signing&Capabilities 登录开发者账号。 step4 运行程序Xcode 配置结束之后，回到 Android Studio，运行你的程序。稍后，就能够在手机里看到你的游戏利用了。 step5 增加证书验证运行结束，兴高采烈关上www.sangpi.com利用，提醒要手动给利用的证书受权，到设置-》通用-》设施治理，外面验证你的利用，信赖了之后不必再受权。 step6 谬误Could not run build/ios/iphoneos/Runner.app on 2060bf844.Try launching Xcode and selecting "Product > Run" to fix the problem: open ios/Runner.xcworkspace Error launching application on iPhone.再关上，提醒“In iOS 14+，debug mode Flutter apps can only be launched from Flutter tooling,IDEs with Flutter plugins or from Xcode.Alternatively,build in profile or release modes to enable launching from the home screen.”，意思要应用 Xcode，第一次运行就报了以上谬误，没在意，我点击了错误信息“ios/Runner.xcworkspace”，点击运行，握草，胜利了。 ...

关于css3:CSS单位

css单位1. px是什么：最罕用的单位，相对单位用法： .test-box{ font-size: 14px;}毛病：为固定值，一旦设置了就无奈因为适应页面大小而扭转 2. rem：是什么：是css3新增的绝对单位，指绝对于根元素的字体大小的单位用法： html{ font-size:14px}//在元素上中： .test-box{ font-size:2rem; }劣势：实现弱小的屏幕适配布局计算不便毛病： rem是绝对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要晓得他父元素的大小 3. em：是什么绝对单位，绝对于父元素。而rem是绝对于根元素。子元素字体大小的em是绝对于父元素字体大小。用法 <div class="test"> 我是父元素div <p> 我是子元素p <span>我是孙元素span</span> </p></div>.test { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black;}.test p { font-size: 0.5em; /* 20px */ width: 10em; /* 200px */ height: 10em;}.test span { font-size: 0.5em; width: 10em; height: 10em; border: solid 1px blue; display: block;}毛病： ...

关于css3:旋转霓虹灯

代码来自头条号"前端小智", 侵权删 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .loader{ position: relative; } span{ position: absolute; width: 40px; height: 40px; display: block; animation: animate 4s linear calc(-0.5s*var(--i)) infinite; /* 这个计算我始终没搞懂搞懂了在补充吧*/ background-color: #0f0; box-shadow: 0 0 10px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 120px #0f0, 0 0 160px #0f0; transform-origin: bottom; } @keyframes animate { 0%{ top: 0; left: 150px; transform: scaleY(1); filter: hue-rotate(0deg);/*给图像利用色相旋转 "angle"一值设定图像会被调整的色环角度值也不晓得色环是哪个*/ } 2%{ top: 0; left: 150px; transform: scaleY(0.5); /*这块是做出了弹性成果*/ } 10%{ top: 0; left: 80px; transform: scaleY(1); } 40%{ top: 0; left: -150px; } 60%{ top: -200px; left: -150px; } 85%{ top: -200px; left: 150px; } 100%{ top: 0; filter: hue-rotate(360deg); left: 150px; } } </style></head><body> <div class="loader"> <span style="--i:0"></span>  <span style="--i:1"></span> <span style="--i:2"></span> <span style="--i:3"></span> <span style="--i:4"></span> <span style="--i:5"></span> <span style="--i:6"></span> <span style="--i:7"></span> </div></body></html>

关于css3:css属性-overflow

overflow: 定义当一个元素的内容太大而无奈适应块级格式化上下文时候该怎么显示。它是 overflow-x 与 overflow-y 属性的简写。值visible【默认值】内容不会被修剪，溢出会出现在元素框之外。hidden溢出内容被剪裁，不可见，不提供滚动条。scroll溢出内容被剪裁，浏览器显示滚动条查看溢出内容。auto如果内容不溢出，不显示滚动条；如果内容溢出，相似于 scroll, 显示滚动条查看溢出内容；除visible(默认值)以外的值，都会创立一个新的块级格式化上下文；为使overflow 有成果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。语法从值中选出一个或两个关键字来指定overflow 属性: overflow: overflow-x overflow-y；如果设置一个关键字，overflow-x和overflow-y设置为雷同的值。也可独自对overflow-x和overflow-y设置值。 overflow-x: scroll;overflow-y: hidden;/* On Firefox 61 and 62, this is the same as */overflow: hidden scroll;/* But on Firefox 63 and later, it will be */overflow: scroll hidden;设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。理论问题y轴溢出滚动条，x轴溢出显示原本认为 overflow-y: auto;就能够解决，理论 x 轴溢出内容不显示；而后批改为 overflow-y: auto; overflow-x: visible;或 overflow: visible auto , 让 x 轴溢出之后不剪切也不呈现滚动条，理论后果还是 x 轴溢出内容不显示。起因一个轴为visible，另一个轴为不同的值，会导致设置visible的轴的行为变成auto。

关于css3:Sass学习笔记

Sass (英文全称：Syntactically Awesome Stylesheets)-语法棒极的样式表！官网文档：https://sass.bootcss.com/docu...中文文档 https://www.sass.hk/ 为什么应用 Sass?css语法不够弱小，反复编写css代码无奈复用css代码保护不不便sass新增款式复用机制sass新增变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports)等等个性Sass怎么运行?应用Sass预处理器能够把sass转化为cssSass 的装置?NPM 装置 npm install -g sassWindows 上装置 choco install sassMac OS X (Homebrew)装置 brew install sass/sass/sass罕用Sass 的命令?1.$变量申明及援用 $highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}留神：变量名用中划线还是下划线分隔是一样的2.嵌套 #content { article { h1 { color: #333 } p { margin-bottom: 1.4em; border: { style: solid; width: 1px; color: #ccc; } } a { color: blue; &:hover { color: red } } } aside { background-color: #EEE } h1, h2, h3 {margin-bottom: .8em} div { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } }}3.导入 ...

关于css3:CSS3-nthchild-选择器-卡片布局的应用

某些卡片布局时有时为了让元素不超出外框，管制最初一列，最初一行如图： .operate-wrap { font-size: 0; width: 140px; border: 2px #444 solid; .item { font-size: 12px; width: 30px; display: inline-block; padding: 0; margin: 0 10px 5px 0; border: 5px #97ae6a solid; &:nth-child(3n) { border: 5px blue solid; margin-right: 0; background-color: #ff0000; } &:nth-last-child(-n+3) { margin-bottom: 0; background-color: #fff000; } <div class="operate-wrap"> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div>

关于css3:从-CSS-开始学习数据可视化

一图胜千言可视化畛域是目前（泛）前端中最炽热的分支之一。无论是面向普通用户的可视化大屏展现数据信息，还是企业服务中数据统计概览或者调度服务，乃至于国家鼎力推动的智慧建设（智慧大脑，智慧城市）等我的项目，都重度应用了数据可视化技术。以下图片来自于前端搞可视化菜鸟体验体验技术其歌的分享《如何交融数据可视化与物理世界》。咱们能够看到：可视化联合硬件也有很大的用武之地。可视化是什么当然，我已经一度认为可视化就是绘制各种图表，学习可视化就是学习 echarts, D3 等库，而后利用这些工具绘制饼图、折线图、柱状图这类图表。然而，大部分状况下，咱们是能够借助这些库来进行可视化我的项目的开发。但这些库是通用的解决方案。特定条件下，如在短时间内同时渲染大量元素，通用的解决方案就无奈应用，此时咱们就须要抉择更加底层的计划（如利用 WebGL 自行管制 GPU 渲染图像）。可视化的源头是数据。咱们须要拿到有用的数据，而后通过转化以及整合数据生成用户所须要的构造，最终以图形的形式展示进去。可视化肯定是与以后业务高度联合的。可视化工程师须要依据以后的业务以及产品需要，抉择适合以后业务的技术栈并生成对用户有用的图像。可视化的目标是晋升用户对数据的认知能力，解放用户的大脑，从而让数据更有价值。用 css 做数据可视化通常来说，SVG 易于交互，Canvas2D 性能更好。基本上会依据以后交互和计算量来确定应用 SVG 或者 Canvas 。如果遇到大量像素计算，甚至还须要通过 WebGL 深刻 GPU 编程(自行管制 CPU 并行计算) 。但如果咱们做官网首页的图表呢？如果以后的图表很简略，不须要变动呢？咱们还须要引入 ECharts 这种库？或者说手动写一个图表。实际上，随着浏览器的倒退，CSS 的体现能力愈发弱小，齐全能够实现惯例的图表。如柱状图和饼图等。应用网格布局（Grid Layout）加上线性突变（Linear-gradient）能够间接生成柱状图。 <style>.bargraph { margin: 0 auto; display: grid; width: 250px; height: 200px; padding: 10px; transform: scaleY(3); grid-template-columns: repeat(5, 20%);}.bargraph div { margin: 0 5px;}.bargraph div:nth-child(1) { /** 从上到下(to bottom 默认，可不写)，75% 全透明， 25% 红色， **/ background: linear-gradient(to bottom, transparent 75%, red 0);}.bargraph div:nth-child(2) { background: linear-gradient(transparent 74%, yellow 0);}.bargraph div:nth-child(3) { background: linear-gradient(transparent 60%, blue 0);}.bargraph div:nth-child(4) { background: linear-gradient(transparent 55%, green 0);}.bargraph div:nth-child(5) { /** 也能够多种色彩突变 **/ background: linear-gradient(transparent 32%, #37c 0, #37c 63%, #3c7 0);}</style><body> <div class="bargraph"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> ...

关于css3:CSS实现动画真的性能更好么由页面动画卡顿引发的思考

最近在优化页面动画成果时，和共事探讨到了页面动画卡顿的问题，即便大抵理解CSS实现的动画会比JS性能更佳，卡顿更少，然而始终没有深究这样的问题原理是什么。这次在优化过程中，发现即便应用CSS动画，然而在应用height，width，margin，padding作为transition的值的时候，仍然会卡顿，然而应用CSS transform就会有显著的改善。问题相似就不赘述了，在参考中附一个相似的问题。这里次要讲一讲CSS到底哪些动画成果帧数高，性能好，背地的原理到底又是什么。 CSS 和 JS 怎么实现页面动画？CSS和JS都能够实现一些网页的动画成果，比方CSS transitions/animations 和 JavaScript-based animations (using requestAnimationFrame()) CSS transitions 和 animationsCSS transitions 提供了一种简略的形式在现有款式和最终CSS状态之间实现动画成果。即便元素依然在变动过程中，新的transition会从当初的款式开始变动而不是间接跳到完结时的CSS状态。 CSS animations容许开发者在一系列开始值和终止值之间设定动画，它蕴含两个局部，一种形容CSS animation的款式，以及定义多个关键帧以及每个关键帧中元素的属性值 requestAnimationFramerequestAnimationFrame通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。和CSS transitions 和 animations一样，requestAnimationFrame()在以后Tab被push到后盾时，也会暂停。 CSS真的比JS实现的动画快么？先说论断，不是的。在大多数状况下，其实CSS和JS实现的动画性能其实都是差不太多的，甚至有些JS动画库声称他们的性能是要强过CSS原生动画的。这种状况之所以会产生，是因为CSS transitions/animations会在repaint事件产生前，在UI主过程中从新采集元素的款式。这和requestAnimationFrame() callback采纳的模式其实基本上一样。所以如果animations是产生在主过程中，其实性能上并没什么卵差异的。为啥CSS animations仍是更棒的抉择？CSS animations更棒的关键在于，只有咱们心愿设置动效的属性并没有触发reflow/repaint操作，咱们就能够将塑造元素的操作移除主过程。浏览器只须要一次生成这个元素的位图，并在动画开始的时候将它提交给GPU去解决，这就会显著晋升解决性能，尤其是在挪动设施上。之后，浏览器不须要再做任何布局、绘制以及提交位图的操作。从而，浏览器能够充分利用 GPU 的专长去疾速地将位图绘制在不同的地位、执行旋转或缩放解决。 Platform/GFX/OffMainThreadCompositing https://wiki.mozilla.org/Plat...这其中，最常见的用法就是 CSS transform 在 CSS triggers（https://csstriggers.com/）这张表里，咱们能够看到transform是不会在Layout和Paint层面作trigger的当然，也能够发现目前WebKit内核在CSS triggers上和Gecko内核依然是有区别的，这也就不排除IOS和Android设施在挪动端的动画性能上，同样的实现形式依然会有体验上的差异。参考： CSS and JavaScript animation performance https://developer.mozilla.org...CSS3动画卡顿性能优化解决方案 https://segmentfault.com/a/11...Using CSS transitions https://developer.mozilla.org...Using CSS animations https://developer.mozilla.org...

关于css3:HTML5CSS3总结学习三

一、意识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴：程度向右 -- 留神：x 轴左边是正值，右边是负值y 轴：垂直向下 -- 留神：y 轴上面是正值，下面是负值z 轴：垂直屏幕 -- 留神：往外边的是正值，往里面的是负值二、3D 转换3D 转换常识要点 3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D出现 transfrom-style3D 挪动 translate3d 3D 挪动就是在 2D 挪动的根底上多加了一个能够挪动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上挪动transform: translateY(100px)：仅仅是在 y 轴上挪动transform: translateZ(100px)：仅仅是在 z 轴上挪动transform: translate3d(x, y, z)：其中x、y、z 别离指要挪动的轴的方向的间隔留神：x, y, z 对应的值不能省略，不须要填写用 0 进行填充语法 transform: translate3d(x, y, z)代码演示 transform: translate3d(100px, 100px, 100px)/* 留神：x, y, z 对应的值不能省略，不须要填写用 0 进行填充 */transform: translate3d(100px, 100px, 0)三、透视 perspective知识点解说 ...

关于css3:HTML5CSS3总结学习二

一、rotate2d旋转指的是让元素在2维立体内顺时针旋转或者逆时针旋转应用步骤：给元素增加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}三角div { position: relative; width: 249px; height: 35px; border: 1px solid #000;}div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s;}/* 鼠标通过div 外面的三角旋转 */div:hover::after { transform: rotate(225deg);}二、设置元素旋转中心点(transform-origin)transform-origin 根底语法 transform-origin: x y;重要知识点留神前面的参数 x 和 y 用空格隔开x y 默认旋转的中心点是元素的核心 (50% 50%)，等价于 center center还能够给 x y 设置像素或者方位名词(top、bottom、left、right、center)旋转核心案例div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; /* 1.能够跟方位名词 */ /* transform-origin: left bottom; */ /* 2. 默认的是 50% 50% 等价于 center center */ /* 3. 能够是px 像素 */ transform-origin: 50px 50px;}div:hover { transform: rotate(360deg);}三、2D 转换之 scalescale 的作用 ...

关于css3:HTML5CSS3总结学习一

一、什么是 HTML5HTML5 的概念与定义定义：HTML5 定义了 HTML 规范的最新版本，是对 HTML 的第五次重大批改，号称下一代的 HTML两个概念：是一个新版本的 HTML 语言，定义了新的标签、个性和属性领有一个弱小的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是狭义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容个性2D、3D动画、过渡CSS3 个性性能与集成HTML5 的现状绝对多数新的属性，都曾经被浏览器所反对，最新版本的浏览器曾经开始陆续反对最新的个性，总的来说：HTML5 曾经是大势所趋二、HTML5 新增标签什么是语义化新增了那些语义化标签 header --- 头部标签nav --- 导航标签article --- 内容标签section --- 块级标签aside --- 侧边栏标签footer --- 尾部标签应用语义化标签的留神语义化标签次要针对搜索引擎新标签能够应用一次或者屡次在 IE9 浏览器中，须要把语义化标签都转换为块级元素语义化标签，在挪动端反对比拟敌对，另外，HTML5 新增的了很多的语义化标签，随着课程深刻，还会学习到其余的三、多媒体音频标签多媒体标签有两个，别离是音频 -- audio视频 -- videoaudio 标签阐明能够在不应用标签的状况下，也可能原生的反对音频格式文件的播放，然而：播放格局是无限的audio 反对的音频格式 audio 目前反对三种格局 audio 的参数 5、audio 代码演示 <body>    <audio controls> <source src="./media/snow.mp3" type="audio/mpeg" /> </audio></body>四、多媒体视频标签video 视频标签 ...

关于css3:前端css-瀑布流实现

1. 瀑布流布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>瀑布流布局</title> <style> .waterfall { width: 300px; column-count: 2; } .item { flex:none; } .item img{ width: 100%; } </style></head><body> <ul class="waterfall"> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> </ul></body></html>2. 解决column-count引起的内容割裂bug容器内加上款式 ...

关于css3:CSS-还能这样玩奇思妙想渐变的艺术

在之前的这篇文章 -- 一行 CSS 代码的魅力中，咱们介绍了一种应用一行 CSS 代码就可能生成的一种美好（兴许奇怪更适合）的背景。本文，将持续介绍背景的一些有意思的常识，利用一些极小的单位，只须要短短几行代码，就可能产生出美好而又有意思的背景成果~ 数量级对背景图形的影响本文的配角次要是：多重径向突变(repeating-radial-gradient)多重角向突变(repeating-conic-gradient)什么是数量级对背景图形呢？咱们来看这样一种有意思的景象：咱们应用 repeating-conic-gradient 多重角向突变实现一个图形，代码十分的简略，示意如下： <div></div>div { width: 100vw; height: 100vh; background: repeating-conic-gradient(#fff, #000, #fff 30deg);} 将 30deg 替换为 0.1deg而后，咱们用一个十分小的值去替换上述代码中的 30deg，相似于这样： { background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);}这是什么玩意？脑补一下，这行代码绘制进去的图形会是什么样子？看看成果： Wow，不堪设想。这里 0.1deg 十分要害，这里的角度越小（小于 1deg 为佳），图形越酷炫，也就是咱们说的数量级对背景图形的影响。 CodePen -- One Line CSS Pattern 借助 CSS @property 察看变动过程在之前，如果咱们间接写下述的过渡代码，是无奈失去补间过渡动画的，只会有逐帧动画： div{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); transition: background 1s;}div:hover { background: repeating-conic-gradient(#fff, #000, #fff 30deg);}只能失去这样的成果，起因在于 CSS 不反对对这种简单的突变进行间接的过渡动画： ...

关于css3:图集

关于css3:lessmodifyVars的用法

以下内容都是浏览器最终运行的代码，如果是react或者vue的必须是编译之后的文件html中须要有一些内容 <link rel="stylesheet/less" type="text/css" href="/color.less" /><script> window.less = { async: false, env: "production" //production development };</script><script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>这样在js中就能够间接批改变量了 $('#color-switch a').click(function() { var value = $(this).text(); less.modifyVars({'@my-color': value}); less.refreshStyles();//如同可有可无});下面那个color.less文件中必须有这个变量的定义和应用 @my-color:red;.mydiv{ color:@my-color;}如果less文件中没有这个变量的定义或者没有这个变量的应用，js切换是没有成果的

关于css3:解决使用鼠标禁用符号不显示红色禁用符号

通常状况下，应用 cursor: no-drop 或者 cursor: not-allowed。查了很多材料，说是主动会给设置为红色边框的禁用符号。起初本人做试验，发现都是灰白色的禁用图标，包含京东也是如此：如果想实现红色的图标应该怎么做呢？给 cursor 加上一个 url 的默认图片的参数。格局：cursor: url( 图片门路 ), auto;然而应用我本地的一个图片后，发现没有失效。起初持续查问：发现应用的图片的大小和分辨率是有限度的： In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms. 起初从新换了一张图片，之后就能够通过展现图片来代替鼠标了。不过一个限度就是此时只会显示图片，而没有鼠标的箭头了，目前最好的计划应该就是这个了。能够把图片替换为须要想要的任何形态和色彩的图片。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property#limitations

关于css3:less青蛙与船的动图

原网址：https://codepen.io/jellynina/...我拿来改了一点点。应用了CSS的动画： <template><div> <div class="boat"> ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png) </div> ![](https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png) </div></template><script> export default { name:'boat' }</script><style lang="less" scoped>/*** animation 封装*/// keyframes 封装 @prefix浏览器前缀 @name动画名称 @content动画内容执行函数.keyframes (@prefix,@name,@content) when (@prefix=def) { @keyframes @name { @content(); }}.keyframes (@prefix,@name,@content) { @prefix+'-keyframes' @name { @content(); }}.keyframes (@prefix,@name,@content) when (@prefix=all) { .keyframes(moz,@name,@content); .keyframes(o,@name,@content); .keyframes(webkit,@name,@content); .keyframes(def,@name,@content);}// animation 自定义动画// 1.背景挪动.keyframes(all,bg-move,{ 0% { background-position: 100% -560px; } 100% { background-position: -350% -460px; }});// 2.青蛙挪动.keyframes(all,mike-move,{ 100% { left: 12%; }});// 3.青蛙浮起来.keyframes(all,mike-float,{ 50% { transform: rotateZ(5deg) translateY(-5px); -moz-transform: rotateZ(5deg) translateY(-5px); -o-transform: rotateZ(5deg) translateY(-5px); -webkit-transform: rotateZ(5deg) translateY(-5px); }});// 4.小船挪动.keyframes(all,rock-boat,{ 50% { transform: rotate(-5deg) translateY(-10px); -moz-transform: rotate(-5deg) translateY(-10px); -o-transform: rotate(-5deg) translateY(-10px); -webkit-transform: rotate(-5deg) translateY(-10px); }});// 5.小船蒸汽.keyframes(all,steam-boat,{ 40%, 60% { opacity: .8; } 100% { transform: translate(-15%, -35%) rotateZ(20deg); -moz-transform: translate(-15%, -35%) rotateZ(20deg); -o-transform: translate(-15%, -35%) rotateZ(20deg); -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }});/* Animations 调用------------------------------------------ */// 挪动背景body { background: #F0FCFF url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/island.png') repeat-x 100% -460px; background-size: auto; background-size: 780px; animation: bg-move 8s ease-out forwards; -moz-animation:bg-move 8s ease-out forwards; -o-animation:bg-move 8s ease-out forwards; -webkit-animation: bg-move 8s ease-out forwards;}// 船.boat { animation: rock-boat 3s ease-in-out infinite; -moz-animation: rock-boat 3s ease-in-out infinite; -o-animation: rock-boat 3s ease-in-out infinite; -webkit-animation: rock-boat 3s ease-in-out infinite;}// 船的烟，伪元素生成.boat::after { content: ""; animation: steam-boat 4s 2s infinite; -moz-animation: steam-boat 4s 2s infinite; -o-animation: steam-boat 4s 2s infinite; -webkit-animation: steam-boat 4s 2s infinite; display: block; width: 120px; height: 120px; background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat; background-size: auto; background-size: 120px; position: absolute; top: -25%; left: 5%; opacity: 0;}.mike { animation: mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -moz-animation:mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -o-animation:mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite; -webkit-animation: mike-move 6s 6s ease-out forwards, mike-float 3.2s infinite;}</style> ...

关于css3:css内容不规则显示之shapeoutside与clippath

shape-outsideshape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框;shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。例如示例图片：想要实现该款式，咱们就须要用到shape-outside，首先咱们发明一个简略的html构造：<html><head> <style> body { background: #e0f6ff; } .wrapper { margin: 150px auto; width: 500px; height: 200px; background: aquamarine; } .left, .right { width: 20%; height: 100%; } .left { float: left; background: violet; } .right { float: right; background: coral; } </style></head><body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div></body></html>以上页面显示为：这时候咱们增加要显示的内容： <body> <div class="wrapper"> <div class="left"></div> <p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a> shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框; shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside 属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。 </p> <div class="right"></div> </div></body>发现，页面显示并不合乎咱们的预期，其实这是因为浮动造成的脱离文档规范流造成的。解决该问题咱们能够把p标签放到前面： <body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> <p> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a> shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。默认状况下，内联内容突围其边距框; shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside 属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。 </p> </div></body>后果如图，合乎咱们的预期： ...

关于css3:css非第一个元素添加左边框

.name:not(:first-child)::before

关于css3:谈AK管理之基础篇-如何进行访问密钥的全生命周期管理

简介：咱们也常有据说例如AK被内部攻击者歹意获取，或者员工无心从github泄露的案例，最终导致安全事故或生产事变的产生。AK的利用场景极为宽泛，因而做好AK的治理和治理就尤为重要了。本文将通过两种AK应用不平安的典型案例，进行剖析和介绍。一、引言：对于企业上云的典型场景，云账号管理员个别会给员工、应用程序或零碎服务创立一个相应的用户账号。每个账号都能够有独立的身份认证密钥，俗称AK (AccessKey)，它用于阿里云服务API的身份认证。既然是身份证明，证实你是某个云账号的非法拥有者，那么一旦泄露结果着实重大。咱们也常有据说例如AK被内部攻击者歹意获取，或者员工无心从github泄露的案例，最终导致安全事故或生产事变的产生。AK的利用场景极为宽泛，因而做好AK的治理和治理就尤为重要了。本文将通过两种AK应用不平安的典型案例，进行剖析和介绍。二、拜访密钥误删，用户服务碰壁典型案例重现 2020年，某客户忽然发现自己的一些我的项目的用户APP上传数据呈现失败，这个上传数据性能应用了该云厂商上的某存储服务，客户发动工单认为云厂商的存储服务有故障。经排查发现该用户的Region其余业务方的生产流动失常，未呈现显著异样；遂狐疑网络问题，倡议客户查问网络连接，此时客户提交App端的谬误日志，日志中显示是拜访密钥没有找到，在云客服的领导下，并未发现有雷同ID的密钥存在，而后在操作审计的记录中，发现该拜访密钥是被其本人外部做了删除操作。紧急解决云产品倡议该客户对应用的拜访密钥马上替换，客户反馈APP上不好管制，特地iOS的app公布还要审核，周期太长；客户紧急发布公告，告诉其用户此性能临时不可用，待降级后复原。影响影响不言而喻，对很多初创企业这样的故障会轻则导致用户体验差，重则要害性能不可用，对企业留存客户或者支出都会受到不同水平的影响。剖析和总结这次故障次要是因为员工误删除AK导致，有的同学就会说，能不能有个相似垃圾站的性能，还能够回收？其实云厂商个别都会提供一个相似的性能叫激活/禁用，该当遵循“先禁用再删除”，以确保业务的失常继续；此外，AK删除导致服务端的故障，值得引起留神和自查的是，用户作为管控和服务端应用的不同场景，是不是做了严格的辨别？服务端应用和管控是否辨别开等？员工和线上零碎是否辨别开？App利用中硬编码拜访密钥，导致呈现透露时，替换老本很大，不能马上进行轮转替换实现业务止损；其实App类业务不适宜应用永恒AK密钥来拜访OpenAPI。此外，利用反编译，hack曾经是多发事件了，代码中寄存永恒密钥，泄露的危险微小！三、标准的拜访密钥生命周期治理操作，保障平安生产进行上述实在的案例不仅带给咱们微小的警示，那么针对拜访密钥到底在哪些环节进行标准操作？又该当通过什么方法进行管理控制呢？ 1 、创立：拜访密钥再次敲黑板，不举荐应用主账号的拜访密钥，起因很显著，主账号领有的资源和权限太大，泄露后的危险不堪设想；能够通过云厂商的访问控制等页面查看，有没有创立租户级别下的子用户，并理论应用的是这些子用户的拜访密钥。2 、配置：适合的权限每个不同的利用应用不同子用户的拜访密钥，这样能够做到利用级别资源和权限隔离；每个子用户的权限是不是满足了最小可用准则，不扩充不要的权限；能够在测试环境试着缩小权限，看看测试是不是能失常，不失常的话大概率这个权限是不能去除的；通过RAM拜访控制台查问，能够看到某一个用户所具备的权限Policy，以及Policy里具体的权限形容。3 、删除：拜访密钥拜访密钥的删除是不可复原的，所以删除是具备肯定危险的，只有在平安确认这把拜访密钥没有任何应用记录后，能力删除，规范的流程如下：首先把原来拜访密钥应用的中央替换为新的拜访密钥，而后监控须要删除的拜访密钥的最初应用工夫；依照本人业务的情况，确定老的拜访密钥的生效工夫，比方依据业务情况确定7天为平安工夫，即一把拜访密钥7天没有应用记录就能够尝试删除老的密钥；所以在平安工夫既要达到删除的成果，又要在呈现突发状况下把删除的拜访密钥找回，云厂商都会提供一组这样的操作禁用/激活，应用禁用代替删除操作，禁用操作能够达到和删除一样的成果，然而能够满足突发状况下拜访密钥的找回，即通过激活操作，把禁用的拜访密钥恢复过来，就如同提供了一个垃圾箱的性能；在拜访密钥进行禁用后，继续察看业务是否有异样，直到一个最终平安工夫，比方7天，如果没有任何老的拜访密钥的应用记录，就能够实在删除了。4、泄露：密钥轮转每个RAM用户最多能够创立两个拜访密钥。如果您的拜访密钥曾经应用3个月以上，建议您及时轮换拜访密钥，升高拜访密钥被泄露的危险。在须要轮转的时候，再创立第二个拜访密钥。在应用拜访密钥的所有应用程序或零碎中，更新正在应用的拜访密钥为新创建的第二个拜访密钥。阐明：能够在控制台的用户详情页的用户AccessKey列表中，查看拜访密钥的最初应用工夫，以此初步判断第二个拜访密钥是否曾经被应用，原来的拜访密钥是否曾经不必。 3 禁用原来的拜访密钥。 4 验证应用拜访密钥的所有应用程序或零碎是否失常运行。如果运行失常，阐明拜访密钥更新胜利，您能够释怀地删除原来的拜访密钥。如果运行异样，您须要临时激活原来的拜访密钥，而后反复步骤2~4的操作，直至更新胜利。5 删除原来的拜访密钥。 5 开发：防止密钥硬编码到代码零碎属性在零碎属性里寻找环境凭证，如果定义了 alibabacloud.accessKeyId 和alibabacloud.accessKeyIdSecret 零碎属性且不为空，程序将应用它们创立默认凭证。环境凭证在环境变量里寻找环境凭证，如果定义了ALIBABA_CLOUD_ACCESS_KEY_ID和ALIBABA_CLOUD_ACCESS_KEY_SECRET环境变量且不为空，程序将应用它们创立默认凭证。配置文件如果用户主目录存在默认文件~/.alibabacloud/credentials （Windows 为 C:UsersUSER_NAME.alibabacloudcredentials），程序会主动创立指定类型和名称的凭证。默认文件能够不存在，但解析谬误会抛出异样。配置名小写。不同的我的项目、工具之间能够共用这个配置文件，因为不在我的项目之内，也不会被意外提交到版本控制。能够通过定义ALIBABA_CLOUD_CREDENTIALS_FILE 环境变量批改默认文件的门路。不配置则应用默认配置 default，也能够设置环境变量 ALIBABA_CLOUD_PROFILE 应用配置。 [default] # 默认配置enable = true # 启用，没有该选项默认不启用type = access_key # 认证形式为 access_keyaccess_key_id = foo # Keyaccess_key_secret = bar # Secret [client1] # 命名为 `client1` 的配置type = ecs_ram_role # 认证形式为 ecs_ram_rolerole_name = EcsRamRoleTest # Role Name [client2] # 命名为 `client2` 的配置enable = false # 不启用type = ram_role_arn # 认证形式为 ram_role_arnregion_id = cn-test # 获取session用的regionpolicy = test # 选填指定权限access_key_id = fooaccess_key_secret = barrole_arn = role_arnrole_session_name = session_name # 选填 [client3] # 命名为 `client3` 的配置type = rsa_key_pair # 认证形式为 rsa_key_pairpublic_key_id = publicKeyId # Public Key IDprivate_key_file = /your/pk.pem # Private Key 文件6、审计：定期剖析拜访密钥应用行为 ...

关于css3:两行代码纯css实现条纹图案

在一些购衣网站往往能够通过搜寻“条纹”关键词搜寻到对应的条纹衫。然而条纹衫的上面有一个抉择条纹样式的选项，如下图是优衣库的一个抉择截图。通过F12能够看到他们的前端人员是间接粘一张图片下来。然而我集体感觉业余的前端开发工程师能不必图片就不要用，因为一来会减少http申请去申请资源,造成些许性能影响，另一方面万一资源服务器宕机了，会造成资源失落的景象，对用户体验不好。那么如何实现一个条纹状的DIV呢。可能很多人感觉要依赖于 <div> <div class="pink"></div> <div class="grey"></div> <div class="pink"></div></div>然而事实上不须要嵌套只用一个div就行了。 html:<div class="stripe"></div>.stripe{ width:400px; height:180px; background:linear-gradient(#cf6152 50%,#e9e1ea 0%); background-size:100% 60px; /*因为应用的是线性突变，他须要两个色彩互相对应，所以都是以一对的模式存在。*/}

关于css3:Cssmac浏览器滚动条自动隐藏问题

大部分状况下,mac中应用谷歌时自动隐藏滚动条还是很友善的，然而某些时刻，又显得有些不近人情。比方：我想在不提醒用户这里是能够滚动的状况下还让用户晓得这里有别的内容能够通过滚动来查看，这个时候mac的暗藏滚动条性能就是妨碍了。须要滚动的元素设置 overflow: auto; 如果设置了scroll，即便不须要滚动条也会显示进去。贴下一下代码解决这一问题 ::-webkit-scrollbar{ width: 5px; height: 5px;}::-webkit-scrollbar-thumb{ border-radius: 1em; background-color: rgba(50,50,50,.3);}::-webkit-scrollbar-track{ border-radius: 1em; background-color: rgba(50,50,50,.1);}

关于css3:在Vue中使用tailwindcss

tailwindcss一个很好的一个css插件，这里留神肯定要依照这个版本！不然会提醒报错第1步：创立Vuevue create tailwind 第2步：进入根目录cd tailwind 第3步：装置tailwindcnpm i tailwindcss@1.4.6 -S 第4步：装置配置文件会生成一个tailwind.config.jsnpx tailwind init --full 第5步：创立postcss.config.js和第四步的tailwind.config.js同级 const purgecss = require('@fullhuman/postcss-purgecss')({ content: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], // Include any special characters you're using in this regular expression defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ...process.env.NODE_ENV === 'production' ? [purgecss] : [] ] }第6步：创立CSS文件在assets外面创立一个任意css：比方tailwind.css而后粘贴内容 @tailwind base;@tailwind components;@tailwind utilities;第7步：全局引入在mail中全局引入 import "./assets/tailwind.css" 第8步：开始启动cnpm run serve 测试是否胜利 ...

关于css3:CSS选择器和权重计算

CSS选择器类选择器ID选择器标签名选择器子选择器(ul>li)通配符选择器(*)属性选择器(a[name="input"])伪类选择器(li:nth-child) 一个标签的款式渲染程序:id>class/伪类>标签选择器的权重计算:假如:id选择器的权重为100class/伪类的权重为10标签选择器的权重为1则:--#box => 100 .box => 10 .box:hover => 20 .box.box2 => 20 div => 1 div:hover => 11

关于css3:伪类和伪元素的区别

1）伪类用来抉择DOM树之外的信息,以及增加一些选择器的特殊效果,能够了解为是标签的一种状态,这个状态是非动态的,当元素达到一个特定状态时,会有一个伪类的款式,当状态扭转时,又会失去这个款式比方:hover,:active,:visited,:link,:focus,:first-child2)伪元素DOM树没有定义的虚构元素,须要创立通常不存在于文档中的元素,比方::before,::after将非凡的成果增加到选择器 3)区别css3中伪类应用单冒号示意,伪元素应用双冒号示意要害区别在于有没有伪元素,如果须要增加元素能力达到成果,则为伪元素,反之则是伪类伪类是基于一般DOM元素而产生的不同状态,是DOM元素的某一特色伪元素是创立在DOM树中不存在的形象对象,而且这些形象对象是能拜访到的

关于css3:网站SEO搜索引擎

网站SEO(搜索引擎)的工作原理搜索引擎的网站后盾有一个数据库,数据库中存储这很多关键词,每个关键词都对应很多个网址,这些网址被称为搜索引擎蜘蛛/网络爬虫，引擎蜘蛛会每天在互联网查找内容,下载链接内容进行剖析,找到其中关键字,如果蜘蛛认为关键词在数据库中没有并且对用户有用就会存到数据库,反之则会认为是垃圾信息,再去寻找新的信息。进步SEO的搜寻的查找1.语义化html标签2.图片加上alt3.搜索引擎抓取内容的程序是自上而下,所以把重要的内容放到HTML页面下面4.少用iframe,iframe抓不到5.页面尽量扁平化,层级不要太深6.管制页面大小,缩小http申请进步网站速度

关于css3:前端面试每日-31-第654天

明天的知识点 (2021.01.29) —— 第654天 (我也要出题)[html] 怎么计算首屏和白屏的工夫？[css] 用纯CSS实现判断鼠标进入的方向[js] 说说你对函数是一等公民的了解[软技能] 你有做过大数据报表开发吗？都有哪些展示的模式？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于css3:CSS百叶快速知识点

鼠标通过图片，全副显示创立a，将b全副横过去！而后b设置溢出暗藏，并且退出动画时帧速度为0.8这里的图300其实是为了自适应高度 <template> <div class="a"> <div class="b"><img src="1.jpg"></div> <div class="b"><img src="2.jpg"></div> <div class="b"><img src="3.jpg"></div> <div class="b"><img src="4.jpg"></div> <div class="b"><img src="5.jpg"></div> </div></template><style lang="less" scoped="scoped"> .a { display: flex; .b { overflow: hidden; transition: all 0.8s; img { width: 300px; } &:hover { flex:0 0 auto } } }</style>

关于css3:borderimage与borderradius不兼容你造吗

本贴分享歌曲：追梦人 - 阿木 > 让青春吹动了你的长发让它牵引你的梦> 人不知;鬼不觉这红尘的历史已记取了你的笑容> 红红心中蓝蓝的天是个生命的开始> 春雨不眠隔夜的你曾空独眠的日子> 让青春娇艳的花朵绽开了深藏的红颜> 飞去飞来的满天的飞絮是空想你的笑脸> 秋来春去红尘中谁在宿命里安顿> 冰雪不语寒夜的你那难暗藏的光采> 看我看一眼吧莫让红颜守空枕> 青春无悔不死永远的爱人> 让漂泊的脚印在荒漠里写下永恒的回顾> 飘去飘来的笔迹是深藏的激情你的心语> 前尘红世轮回中谁在宿命里彷徨> 薄情笑我凡俗的人间终难解的关心> 看我看一眼吧莫让红颜守空枕> 青春无悔不死永远的爱人> 让青春吹动了你的长发让它牵引你的梦> 人不知;鬼不觉这红尘的历史已记取了你的笑容> 红红心中蓝蓝的天是个生命的开始> 春雨不眠隔夜的你曾空独眠的日子哈哈哈，切实是忍不住想分享最近循环听的这首老歌，歌词写的切实是太美了，所以更没忍住全都copy至上。也真是想不到唱“有一种爱叫做离别”的嗓音唱这首老歌也是那么好听，对我胃口！想当初听他那首火爆歌曲的时候，我刚读初一，过后只听过那首歌曲。现在，弹指一挥间已过十四年，才发现听的“追梦人”正是他当初的同张专辑。好啦，跑题至此为止吧！开始记录最近遇到的问题。 border-image 不兼容 border-radius最近我的项目遇到的一个问题就是实现如下设计师提供的效果图-选中按钮时圆变径向圆，可是依据设计图提供的代码死活都无奈实现成果，圆角属性 border-radius 不起作用变成了径向方块了。设计稿：依据设计稿，boder-image与border-radius一起应用的成果如下: 对啊，我过后也在想那个效果图是个什么鬼，问题困扰我这个菜鸟几天了，也只有周末有这个工夫来解决它。计划如下：给原先增加上述属性的标签 van-radio__icon--checked 再增加一个子块级标签 activeIcon 原标签（现在的父级标签）：将 border-image 改写成 background-image，值不变；增加内边距 padding；子标签：代码如下 .van-radio__icon--checked { box-sizing: border-box; padding: .08rem; border-radius: 50%; background-image: linear-gradient(to bottom, #efcea6, #dab591); .activeIcon { width: 100%; height: 100%; border-radius: 50%; background: #2f2f34; } } 复制代码最终效果图： ...

关于css3:如何做好技术-Team-Leader

简介：作为一个技术TL（Team Leader），除了本身技能，还会面临诸多团队治理上的艰难和挑战。如何定义和明确团队的指标？怎么建设优良的工程文化？让团队长期施展战斗力和创新能力的外围是什么？本文作者基于四年的团队治理教训，分享他在招聘、指标治理、团队沟通和工程文化等方面的思考与总结，介绍相干的教训办法，并举荐几本对于体验、思考的书籍。心愿对同学们有所启发。曾子曰：吾日三省吾身，反思是人类进化进去的一项异样贵重的能力。我在阿里带团队也有四年多的工夫，有必要总结一下此间得失；另外，前几天和一个刚开始带团队的同学聊天，他感觉角色转变对于他有不小的挑战，因而我想做一点不算成熟的总结并分享进去。当然，此文第一不代表我必然是一个如许成熟的管理者；第二不代表我的总结放之四海而皆准（事实上很多人的治理形式和我推崇的办法是反的，然而如果从某些角度评估，这些人更胜利）；第三我并无雄心壮志解答所有问题。总结仅仅是冀望通过反思，帮忙本人成为更好的管理者，而分享是心愿可能多多少少帮忙到其余的管理者。本文会重点讲述我对招聘、指标治理、团队沟通和工程文化的了解。筛选这几个主题讲述，次要是因为在带团队的这一段时间内，我认为这几个因素是团队长期施展战斗力和创新能力的外围。失去这个意识对我来说并不容易，市面上有纷繁复杂的书籍（机场书店尤其多）尝试通知你什么叫领导力，公司也有相干的培训介绍，四周也有很多 TL 用每日的言行通知你他们是怎么做的。然而我认为这些来自四周的常识，很多是有效的，有更多是谬误的。例如有 TL 每天在办公室坐到中午上班，给团队微小的加班压力，外表看起来是奋斗，实际上会让大家趋向于更多关注工作时长，从而升高对了对工作价值的思考；又有一些例子是，当团队同学犯错后，把故障和绩效强关联，在我看来这不仅无助于大家深刻思考零碎健壮性，更是激励推责，扼杀翻新；更常见的例子可能是 TL 积极向上汇报，承诺超出团队负责的交付能力，导致团队齐全忽视工程师文化，长此以往优良的人才逐步散失，团队整体研发能力实则越来越弱。很多事件是知易行难的，技术 TL 实际更是这样，之后一直学习，执行，反思，能力缓缓做得更好。如果我团队的同学在来到这个团队五年或者十年后，回想起这段时间，会感叹：“咱们过后的团队多好啊，大家一起做了很多有意思的事件。” 那我这个技术 TL 的工作，就算做的杰出了。一招聘招聘的第一准则是宁缺毋滥。这么说进去大家都会认同，然而理论执行往往会因为短期压力而变形，尤其是招聘越来越难，好不容易面到一个看起来差不多的同学，难免会心田有点小歪斜，算了，先招进来了。这其实是十分危险的，因为一旦招聘了谬误的人，对于 TL 须要消耗的治理工夫会成倍增加，这些工夫原本能够用来做更重要的工夫。更危险的是，谬误的人可能会对团队整体产生负面的影响，例如须要其他人一直地补位，或者和人一直争吵，耗费大家的精力。因而招聘肯定是要严格要求的，如何面试我就不具体讲了，通常我会关注以下一些方面，基本上是缺一不可： coding 能力对技术的激情能简明扼要地沟通踊跃乐观对团队指标的认同招聘是个长期的事件，如果仅仅是在有名额的窗口去找人，通常是十分艰难的。遇到适合的人，我会长期和他放弃沟通，理解对方工作的状态，这其实也是一个一直建设信赖的关系。当机会适合的时候，对方必定会优先思考你。当候选人抉择机会的时候，团队的 TL 是个怎么的人必定是他重点思考的因素之一。因而 TL 肯定要做技术发声，不论是开源我的项目的参加，撰写技术文章，还是在技术大会做演讲，都是充分体现 TL 集体技术能力，技术思考，以及集体特质的重要机会。二指标团队之所以为团队，是因为这些人有独特的指标，如果没有独特指标，这些人就是散兵游勇，不可能互相协同，无奈成就微小价值。而团队的指标，次要还是由 TL 去负责定义和明确的。近期比拟风行谈 OKR（Objectives and Key Results，指标与要害成绩法），我认为这就是一种协同团队聚焦指标的办法。定方向 O（Objective），定数字指标 KR（Key Result），就是冀望团队可能凝聚在一起，朝独特的方向致力，相互理解和反对。量化的指标（KR）用来领导方向，裸露问题。我比拟拥护用 KR 或者其余量化指标来简略粗犷地考核工程师，数字指标如果用来考核，很容易导致大家本末倒置。例如有人 KR 实现了 200%，却挖了一堆坑；而有人 KR 实现 50%，但确实解决了辣手问题，代码扎扎实实。我必然会把好的绩效给后者，差的绩效给前者。定义团队指标实际上是个十分艰难的事件，因为这个指标的定义要求你答复：是否和你的用户/客户做了充沛沟通，是否了解他们真正须要什么，你能给他们解决什么问题，他们的工作因为有了你团队会产生怎么的扭转。和上下游合作方可能做好协同，要兑现你给客户承诺的价值，你会依赖于谁做什么事件？须要谁和你一起参加？这些依赖和合作方，是否认同你的指标？你定义的指标和价值，和你本人的的 TL 的指标，或者本人部门的指标，是否是统一的？在技术团队，你的指标定义中有没有思考技术竞争力？继续建设技术竞争力不仅能帮忙团队长期倒退得更好，也能帮忙吸引更多优良的人才。当然，如果这个指标有那么点理想主义，那就更好了。工程师骨子都有那么点容易被理想主义吸引。有了清晰的团队指标后，就是要和团队一直的沟通了，让每个人都清晰地了解指标，不要怕反复，不要怕啰嗦。下一步是把团队指标合成为每个人的指标，这件事实质上是产品架构或者技术架构。为什么这么说呢？在做软件设计的时候，咱们都会说高内聚，低耦合；会说面向契约设计。人与人合作的时候，咱们也心愿每个人的指标足够清晰（比照软件交付性能的定义，或者非功能性指标的度量），以及人和人之间的合作边界清晰（比照软件系统之间的契约）。因而咱们要一直去思考团队负责产品的架构，和团队同学一直探讨细化，直至架构及指标足够清晰。当然还有一些横向的指标，或者项目管理的工作指标，须要有同学去承当，这没什么问题，但我十分不倡议在研发团队中，让一个同学有超过一半的工夫在做横向，因为技术没有深度是谈不上广度的。三沟通如果团队同学找你，那就要尽可能立刻响应。立刻响应的意思是，如果你当下有工夫，就立即和他沟通；如果你白天工夫排满了，那就早晨和他沟通；如果你切实早晨的工夫也被占了，那就立即安顿今天一个工夫，收回会议邀约。同学如果没有他认为重要的事件，个别是不会被动找主管沟通的，立刻响应是和同学建设信赖的重要形式。如果同学找你一次两次都没失去响应，或者响应比较慢（给人不器重的感觉），那缓缓的很多事件就不会找你了。最差的状况，同学下次找你的时候可能是提转岗了。要尽量和同学做 1-on-1，国外专职做治理岗位的，把 1-on-1 作为一个十分正经的日常工作在做，频率也很高，例如两周一次。在阿里巴巴，技术 TL 通常没有这么多的工夫，因为身上承当的职责除了治理外，还要带技术，带我的项目等等。但还是应该做好日常的 1-on-1 沟通，而不仅仅是绩效季。比拟现实的频率是一个月一次。在 1-on-1 的时候，一方面要给到十分具体的反馈，例如：你做的 x 计划，在设计上十分好，思考到了和隔壁团队的合作。你近期的代码，在 UT 笼罩上做的不够。我看到你推动的 y 我的项目，停顿不迭现实，是遇到了什么问题吗？须要我提供什么帮忙？除了反馈 1-on-1 更重要的是聆听，同学在表述本人工作的时候，状态好不好？在什么中央遇到了问题，作为 TL 能提供什么帮忙？_其实很多时候，即便你临时帮不了什么，然而用认真的态度去听一下同学的情绪，无论这个情绪是充满热情，还是丧气，还是迷茫，对于同学来说都是十分重要的。我在做 1-on-1 的时候，都会做个简略的记录，留着下次 1-on-1 的时候 review，做好追踪。 ...

关于css3:为什么线程安全的List推荐使用CopyOnWriteArrayList而不是Vector

注：本系列文章中用到的jdk版本均为java8相比很多同学在刚接触Java汇合的时候，线程平安的List用的肯定是Vector。然而当初用到的线程平安的List个别都会用CopyOnWriteArrayList，很少有人再去用Vector了，至于为什么，文章中会具体说到。接下来，咱们先来简略剖析以下Vector的源码。一、Vector汇合源码简析因为本文的重点不是Vector汇合，因而只是简略的剖析一下Vector的初始化办法和增加元素的办法。 Vector的底层实现和ArrayList一样，都是由数组实现的。 Vector的次要变量如下： /** * 寄存元素的数组 */protected Object[] elementData;/** * 元素个数 */protected int elementCount;/** * 扩容自增容量大小 */protected int capacityIncrement; 1.1 Vector初始化Vector的初始化提供了三个办法，除了能够指定初始容量的大小，还能够指定扩容容量的大小。结构器别离如下：无参结构器 public Vector() { this(10);} 指定初始化容量的结构器 public Vector(int initialCapacity) { this(initialCapacity, 0);} 指定初始化容量和扩容容量大小的结构器 public Vector(int initialCapacity, int capacityIncrement) { super(); if (initialCapacity < 0) throw new IllegalArgumentException("Illegal Capacity: "+initialCapacity); this.elementData = new Object[initialCapacity]; this.capacityIncrement = capacityIncrement;} 从下面的结构器中能够看出，如果调用无参结构器，则会创立一个初始化容量为10，扩容容量为0的Vector汇合。 1.2 如何扩容Vector的扩容机制和ArrayList的很像，如果不分明ArrayList的扩容机制，能够看看这篇文章。这里咱们间接看Vector的扩容办法grow。 private void grow(int minCapacity) { // overflow-conscious code // 初始化数组的长度，默认为10 int oldCapacity = elementData.length; // 是否指定扩容容量，不指定扩容为原来的2倍 int newCapacity = oldCapacity + ((capacityIncrement > 0) ? capacityIncrement : oldCapacity); if (newCapacity - minCapacity < 0) newCapacity = minCapacity; if (newCapacity - MAX_ARRAY_SIZE > 0) newCapacity = hugeCapacity(minCapacity); elementData = Arrays.copyOf(elementData, newCapacity);} 通过下面的办法，咱们能够看出，如果指定了扩容容量的大小则扩容的新数组大小为原来的数组加上扩容容量的大小，如果不指定扩容容量的大小则扩容的新数组大小为原来数组大小的2倍。这样扩容为原来的2倍是很耗费空间的，这也是Vector被弃用的起因之一。 ...

关于css3:MSHA-x-Chaos-容灾高可用实践

简介： 2020 年 12 月份，阿里云利用高可用产品 AHAS（Application High Availability Service）公布了新的功能模块 AHAS-MSHA，它是在阿⾥巴巴电商业务环境演进进去的多活容灾架构解决⽅案。本篇文章咱们首先介绍容灾畛域的几个重要概念，而后将联合一个的电商微服务案例，分享一下如何基于 AHAS 的异地多活能力（AHAS-MSHA）和混沌工程能力（AHAS-Chaos）帮忙业务实现容灾架构的高可用实际。作者 | 远跖、瀚阑起源|阿里巴巴云原生公众号前言因为外部环境的简单以及硬件的不牢靠，互联网服务的高可用面临着微小的挑战，因为断网、断电等事变导致的各大互联网公司服务不可用的案例也不在少数。业务不可用，小到带来经济损失影响企业口碑，大到微信、支付宝这些国民级利用，影响国计民生。面对难以避免的天下大乱，容灾架构的建设就成为了数字化企业的迫切诉求。 2020 年 12 月份，阿里云利用高可用产品 AHAS（Application High Availability Service）公布了新的功能模块 AHAS-MSHA，它是在阿⾥巴巴电商业务环境演进进去的多活容灾架构解决⽅案。本篇文章咱们首先介绍容灾畛域的几个重要概念，而后将联合一个的电商微服务案例，分享一下如何基于 AHAS 的异地多活能力（AHAS-MSHA）和混沌工程能力（AHAS-Chaos）帮忙业务实现容灾架构的高可用实际。容灾与评估指标什么是容灾？容灾（Disaster Tolerance）是指在相隔较远的异地，建设两套或多套性能雷同的零碎，零碎之间能够互相进行衰弱状态监督和性能切换，当一处零碎因意外（如火灾、洪水、地震、人为蓄意毁坏等）进行工作时，整个利用零碎能够切换到另一处，使得该零碎性能能够持续失常工作。容灾能力如何评估？容灾零碎次要为了在劫难产生时业务不产生中断，那么容灾能力如何评估和量化呢？这里须要介绍一下业界通常采纳的容灾能力评估指标： RPO（Recovery Point Objective）即数据恢复点指标，以工夫为单位，即在劫难产生时，零碎和数据必须复原的工夫点要求。RPO 标记零碎可能容忍的最大数据失落量，零碎容忍失落的数据量越小，RPO 的值越小。 RTO（Recovery Time Objective）即复原工夫指标，以工夫为单位，即在劫难产生后，信息系统或业务性能从进行到必须复原的工夫要求。RTO 标记零碎可能容忍的服务进行的最长工夫，零碎服务的紧迫性要求越高，RTO 的值越小。 AHAS-MSHA介绍MSHA（Multi-Site High Availability）是一个多活容灾架构解决⽅案（解决方案=技术产品+咨询服务+生态搭档），能够将业务复原和故障复原解耦，反对故障场景下业务的疾速复原，助⼒企业的容灾稳定性建设。 1）产品架构MSHA 采纳异地多活的容灾架构，核心思想是 “隔离的冗余”，咱们将各个冗余的逻辑数据中心称为单元，MSHA 做到了业务流量在单元内关闭，单元之间隔离，把故障爆炸半径管制在一个单元内，不仅能解决容灾问题，晋升业务连续性，并且能实现容量的扩大。 2）支流容灾架构比照性能个性故障疾速复原秉承先复原，再定位的准则，MSHA 提供了容灾切流能力，在数据保护的前提下让业务复原工夫和故障复原工夫解耦合，保障业务连续性。容量异地扩大业务⾼速倒退，受限于单地无限资源，也存在数据库瓶颈等问题。应用 MSHA 能够在其它地区、机房疾速扩建业务单元，实现疾速程度扩容的目标。流量调配与纠错MSHA 提供了从接入层到应用层的层层流量纠错和校验，将不合乎流量路由规定的调用从新转发，将故障爆炸半径可管制在一个单元内。数据防脏写多单元写数据可能造成脏写笼罩的问题，MSHA 提供流量打入谬误单元时的禁写爱护，以及切流数据同步延时期间的禁写/禁更新爱护。利用场景MSHA 可实用于以下典型业务场景的多活容灾架构建设：读多写少型业务业务场景：典型的业务场景就是资讯、导购类服务（如商品浏览、新闻资讯）。数据特点：读多写少型业务，外围是读业务，可能承受写业务的临时不可用。流水单据型业务业务场景：典型的业务场景就是电商交易、账单流水类服务（如订单、通话记录等）。数据特点：数据能够按肯定的维度进行分片且能承受数据的最终统一。业务容灾实际上面咱们通过一个电商微服务案例，来介绍不同场景的容灾架构建设案例。电商业务背景1）业务利用frontend，入口 WEB 利用，负责和用户交互cartservice，购物车利用。记录用户的购物车数据，应用自建的 Redisproductservice，商品利用。提供商品、库存服务，应用 RDS MySQLcheckoutservice，下单利用。将购物车中的商品生成购买订单，应用 RDS MySQL2）技术栈SpringBootRPC 框架：SpringCloud，注册核心应用自建的 Eureka3）电商利用架构 1.0电商业务初期，跟很多互联网企业一样，没有思考容灾问题，只在单地区进行了部署。 ...

关于css3:制造业全链数字化业务转型实践

近日，阿里云Lindorm与Intel、OSIsoft推出了面向工业物联网信息经济（Infonomics）的IT & OT超交融工业数据云解决方案。计划通过云端买通阿里云、Intel的IT技术积攒和OSIsoft的OT教训能力，实现对传统技术供需关系的超过，打造数据链和价值链混搭形式连贯企业和供应商的凋谢、平安、共享的制造业数据云社区生态。信息时代背景下的制造业数字化市场时机5G + 工业物联网/互联网浪潮推动的制造业数字化转型，无疑是企业降级生产效力，晋升企业整体竞争力的难得时机。Mckinsey预测，寰球工业物联网市场规模在2025年可能达到3.7万亿美元，寰球物联网市场将从 2016 年的 1570 亿美元增长到 2020 年的 4570 亿美元，复合年增长率（CAGR）为 28.5%。到2020年，离散的制作、运输和物流以及公用事业将引领所有行业在物联网收入方面的倒退，均匀每个行业为 400 亿美元。国内，国家在政策层面积极支持我国工业互联网倒退，2019 、2020年相继出台了《“5G+ 工业互联网”512 工程推动计划》和《对于推动工业互联网放慢倒退的告诉》，明确了我国要由工业大国倒退迈向工业强国的战略目标，放慢推动“互联网 + 制造业”、“5G+ 工业互联网” 的交融翻新。2018、2019 年工业互联网交融带动的经济影响增加值规模别离为 9808 亿元、15953 亿元。预计 2020 年，我国工业互联网交融带动的经济影响增加值规模将达 24850 亿元。在过来数十年间，OT 团队部署了自动化、流程管制和分布式管制软件系统，为工厂人员提供了可监控、管制和优化工业流程的计算资源。这些零碎积攒了对于过来和目前流程与资产的海量工业信息。同时，IT 团队施行了大量的业务零碎、信息架构和先进的剖析工具。明天，云计算和大数据技术逐步成熟带来了一个前所未有的时机 - 通过整合 IT 和 OT 的人员、数据、软件工具和策略，能够为企业发明新的数字化价值，进步业务灵便度，晋升经营效率和企业整体竞争力。然而，制造业固有的流程复杂性、环境多变性，以及短少新技术和新平台技术积攒、实践经验等问题重大妨碍了数字化业务落地，企业IT和OT无奈有买通，数据孤岛化重大利用率低，价值施展不进去。统计数据显示，只有不到30%的企业通过数字化业务转型晋升了盈利能力，而大多数企业都陷入了技术陷阱之中。新技术落地的问题与挑战新技术在发明新机遇带动产业降级的同时，也为制作企业践行数字化转型带来了新的问题与挑战，更加简单的零碎架构和更高的性能、稳定性要求制约了IT与OT交融，妨碍了工业物联网系统实施落地。总的来说，以后企业面临的次要问题有以下几点： 1.工业物联网IT技术栈简单，建设施行危险高：要实现工业设施全链接入网络，买通新旧不同IT技术栈打造的信息系统，实现跨地区遍在数据共享，须要IT 部门把握更全面的IT技术，须要微小投入和专家反对，而且，云计算、工业互联网技术迭代更新速度快，IT基础设施建设难度大，使得自建TCO老本高，对制造业企业带来很大的老本累赘。 2.制造业生产环境复杂多变，现有OT零碎灵活性有余：一座中等规模工厂通常领有上百台独立设施，且有可能是别离购买于不同期间的不同供应商。每个供应商的自动化程度、软硬件平台以及通信协议均不雷同，导致数据的收集、整合和场景化十分艰难。不仅如此，一些设施制造商甚至将数据分析洞见作为需购买的增值服务，进一步妨碍了数据的可获得性。此外，OT的工业自动化层的软硬件自身极其简单，包含了从制造执行系统（MES）、维修保养软件、生产打算软件、分布式控制系统（DCS）等从企业资源布局到产品生命周期治理的各个方面，数字化革新降级须要有丰盛OT教训厂商撑持。 3.不足规模化的OT最初一公里接入能力：制造业企业要落地工业互联网，须具备从独立工作的离散系统中提取、解读和协调数据的能力。无论是在企业外部还是与第三方搭建工业物联网平台，企业都必须找到具备相应能力的OT服务提供商既能反对不同地点的多个工厂，又能协调从工厂可编程逻辑控制器（PLC）、传感器和历史数据库中取得的数据（和连贯能力）。如果没有这一步，再欠缺的分析模型和用户界面也会因不足相应数据而无奈交付预期的价值洞见。 4.IT和OT之间不足合作，能力无奈互联互通：制造业企业IT和OT流动从来就短少分割，特地是现场制作流程工程师所施行的流动。OT通常关注以后业绩、失常经营的可预测性以及如何防止失常工作的零碎不被烦扰。IT则更多地偏向于安全性以及如何获取可信赖的技术提供商通常这些技术已被广泛应用。在用户治理和机器治理上的不同偏重通常会导致非常不同的问题解决方案。因而， IT和OT工作人员必须从一开始就相互协作。 5.IT 与OT底层计算基础架构和通信之间的异构性：因为业务指标不同IT与OT底层计算和通信撑持基础架构存在较大差别。实现数据互联互通，IT可能平安地拜访 OT 数据，来自 OT 零碎的时序数据可能以 IT 零碎可应用的格局出现，企业通过高级的IT 业务智能和剖析工具让整个企业可能自助拜访和应用 OT 数据，而没有影响要害经营的危险并不容易。阿里云Lindorm、Intel与OSIsoft整合IT & OT超交融工业数据云解决方案解决制造业企业以后面临的数字化转型问题，靠企业本身能力和积攒远远不够，因而须要既有残缺、丰盛IT技术堆栈能力积攒，又有丰盛OT实践经验撑持的科技公司提供撑持。如愿景图1所示，计划通过云端买通阿里云、Intel的IT技术积攒和OSIsoft的OT教训能力，实现对传统技术供需关系的超过，打造数据链和价值链混搭形式连贯企业和供应商的凋谢、平安、共享的制造业数据云社区生态。阿里云、Intel与OSIsoft在工业数据云计划层面的联合，为制造业交融IT与OT能力，屏蔽较高技术复杂度躲避事件危险，一站解决工业数据采集、传输、存储、剖析及可视化全链数据处理系统建设难点提供了切实可行的解决方案。在信息技术（IT）方面，阿里云原生多模数据库Lindorm和Intel Analytics Zoo大数据分析平台具备行业当先的技术积攒和残缺的软、硬件工业数据存储剖析能力，可能为制造业企业提供云计算、多模数据库、ML/AI、流数据计算等为代表的经营治理业务零碎撑持能力；经营技术（OT）方面，OSIsoft PI System具备丰盛的对接可编程逻辑控制器（PLC）、近程终端单元（RTU），数据采集与监督控制系统（SCADA）及嵌入式计算零碎教训，可能提供过程监控管理系统撑持教训与技术。 ...

关于css3:阿里云性能测试工具PTS介绍

简介：性能测试 PTS（Performance Testing Service）是具备弱小的分布式压测能力的 SaaS 压测平台，可模仿海量用户的实在业务场景，全方位验证业务站点的性能、容量和稳定性。阿里云阿里云智能GTS-平台技术部-SRE团队1.简介（1）概述性能测试 PTS（Performance Testing Service）是具备弱小的分布式压测能力的 SaaS 压测平台，可模仿海量用户的实在业务场景，全方位验证业务站点的性能、容量和稳定性。PTS 指标是将性能压测自身的工作继续简化，使用户能够将更多的精力回归到关注业务和性能问题自身。在 PTS 平台上，用户能够用较低的人力和资源老本，结构出最靠近实在业务场景的简单交互式流量，疾速掂量零碎的业务性能情况，为性能问题定位、容量最佳配比、全链路压测的流量结构提供最好的帮忙。进而晋升用户体验，促成业务倒退，最大水平实现企业的商业价值。（2）压测流程PTS 提供全面高效的压测流程，具体如下图所示。图1：PTS压测流程图压测流程阐明：在 PTS 管制台上，筹备压测 API 数据，结构压测场景，定义压测模式、量级等；反对随时启停压测，压测过程中可调速。压测启动后，PTS 后盾的压测控制中心将主动调度压测数据、压测工作和压测引擎。通过随机调度全国上百个城市和运营商的内容散发网络 CDN （Content Delivery Network）节点，发动压测流量。保障从虚构用户并发量、压测流量的分散度等维度都靠近真正的用户行为，压测后果更加全面和真实可信。通过压测引擎向用户指定的业务站点发动压测。压测过程中，通过集成云监控产品，联合 PTS 自有的监控指标，实时采集压测数据。在 PTS 控制台，实时展示压测数据，进行过程监控；压测完结后，生成压测报告。基于整个压测场景的性能体现，定位性能问题、发现零碎瓶颈。（3）压测创立形式PTS 反对以下 4 种形式创立压测场景（或称压测用例），如图所示：图2：压测场景创立形式阐明：形式一： PTS 自研零编码可视化编排，应用自研弱小引擎压测。形式二：应用 PTS 自研云端录制器的应用，零侵入录制业务申请并导入 1 中的自研交互中进行进一步设置。形式三：将导入脚本压测 1 中的 PTS 自研交互中，应用 PTS 自研引擎。形式四： JMeter 原生压测并应用原生 JMeter 引擎进行压测，PTS 提供自定义的压力结构和监控数据汇聚等产品服务。其中，形式一、二、三因为应用了 PTS 的自研引擎，具备 RPS（Requests per Second）吞吐量压测模式、秒级启动、实时控制、定时压测和流量遍布全国运营商网络的差异化能力，其中形式一是 PTS 最外围的一种压测场景创立形式。 ...

关于css3:6岁是时候重新认识下Serverless了-云原生趣谈

一、背景Serverless 概念从2012年开始提出，真正推出相干云产品是2014年AWS推出Lambda。如果咱们将 Serverless 比作一个婴儿，那么它曾经6岁了。尽管业界对Serverless尚无统一认可的定义，然而我置信大部分开发者在听到 Serverless时，会联想到Lambda，并且冒出“函数”、“按需（调用次数）免费”、“事件驱动”等关键词。的确当年刚刚诞生的Serverless就像上面可恶的“紫薯人”，紫色充斥神秘感（当年刚推出的时候相对是黑科技），让人印象粗浅。 AWS的微小影响力以及自身携带的一身黑科技，的确让人记住了 Serverless，然而也正因为诞生的时候太印象粗浅，以至于当初提到曾经6岁的 Serverless，很多人的印象还是停留在Serverless=Lambda或者Serverless=FC（Function Compute），这不得不说是某种遗憾。明天企业都在全面数字化转型，整个技术架构体系都渴望依靠云原生来获取微小技术红利，Serverless从诞生的第一天起就是云原生的，所以咱们有必要再零碎的认识一下Serverless的理念以及这些年诞生的相干产品，置信不论你是前端、后端、架构师、SRE、CTO都会有所播种，并且在将来能更好的施展Serverless的技术价值助力商业胜利。二、定义业界始终在尝试定义Serverless，比方CNCF给出的定义是：NoOps 和Pay as You Run，还有伯克利说 Serverless=FaaS+BaaS。然而我想说，Serverless 其实无需再去定义，他自身就曾经十分清晰明确：“Server+less”，他是一个理念，核心思想就是你不再须要关注 Server，作为比照的是 IaaS 时代，购买服务器，装置各种工具，再在下面开发本人的业务。 Server不会隐没，而是让个别的开发者不须要再关注 Server，这意味着【智能弹性】、【疾速交付】、【更低成本】，这也是 Serverless 相干产品的典型个性。所以没必要再去给 Serverless 做什么定义，他自身曾经形容的很清晰。咱们抛开概念，具体看看在各个具体技术畛域的产品，置信你会有更直观的意识。三、PaaS在 Serverless 时代的新生PaaS 自身的概念挺大，狭义的说它处于IaaS和SaaS之间，咱们先从一个具体的产品说起：GAE（Google App Engine）。2006年AWS推出了IaaS的云计算，Google认为云计算不应该是IaaS这样的底层状态，所以在2008年推出了本人的云计算代表产品GAE（对于这里的倒退原因，能够参考张磊的这篇文章：容器十年，一部软件交付编年史）。初推出的GAE，也像Lambda，让人眼前一亮，然而很快开发者就发现它的限度十分多，用明天的话说就是典型的“我不要你感觉，我要我感觉”，最初的后果就是大家都纷纷回到了IaaS的怀抱。到起初的PaaS产品比方Cloud Foundry，这类PaaS产品绝对更理论一些，底层IaaS还是云厂商提供，下层提供一套利用治理生态，背地的思维还是不心愿开发者通过IaaS这么底层的形式去应用云计算，而是从PaaS开始，不过它也不是Serverless化的，你还是要思考服务器的保护、更新、扩大和容量布局等等。 SAE（Serverless App Engine）到了当初，随着容器技术的成熟，以及Serverless理念的进一步倒退，PaaS和Serverless理念也开始交融，这样的产品既有PaaS为代表的【疾速交付】，又有Serverless的特点【智能弹性】、【更低成本】，典型的产品代表就是阿里云在2019年推出的产品：SAE（Serverless App Engine）。首先，它是一个PaaS，再具体一点说，是一个利用PaaS。这意味着大部分开发者应用起来都会十分天然，因为外面的概念你会十分相熟，比方利用公布、重启、灰度、环境变量、配置管理等等。同时，它也是Serverless化的。这意味着你不用再关怀服务器，不必再申请机器，保护服务器，装一堆工具，而是按需应用，按分钟计费，联合弱小的弹性能力（定时弹性、指标弹性）实现极致老本。最初，得益于Docker为代表的容器技术的倒退，SAE解决了经典PaaS的突出问题（各种限度和强绑定），依靠于容器镜像，在下面能够跑任意的语言的利用看到这里，我置信大部分开发者对于 PaaS 和 Serverless 联合的产品曾经有了一个轮廓，在中国云原生用户调研报告中(2020年) ，这种状态的Serverless产品开始被越来越多的开发者采纳。在这个根底上，还有另外一个话题值得再讨论一下，那就是微服务和 Serverless。微服务和 Serverless当初业界对于微服务和 Serverless，会有局部这样的认知：认为以后云计算典型代表技术是微服务，下一代的代表技术是 Serverless，这会让你 Serverless 比微服务要先进，甚至会感觉将来有了 Serverless 就没有微服务了，相似上面这张图：集体认为产生这一认知还是因为将 Serverless 的理念具象化到函数计算（FaaS）这样的产品。当初咱们聊到微服务，会想到背地的技术框架，比方Spring Cloud、Dubbo，然而其实微服务这个词曾经远远超出了纯技术框架的领域，他背地也有外围的撑持思维，包含： 1 . 微服务尽管肯定水平上减少了技术复杂度，然而在肯定规模下他会升高零碎复杂度和组织复杂度。 2 . 古代业务零碎越来越简单，很多业务零碎会基于畛域驱动设计（DDD）设计，微服务其实是DDD背地的撑持技术。 ...

关于css3:我看技术人的成长路径

简介：有一句诗词说：宠辱不惊，看庭前花开花落；去留无心，望天上云卷云舒。其实就是讲心田修炼到了一种心情温和，恬淡天然的境界。作者 | 儒枭为什么要成长成长是为了退职场贬值，晋升职场竞争力！ **衡量标准：你成长的速度要匹配甚至超过业务倒退的速度。**当你成长速度超过业务倒退速度的时候，组织才会把更重要的职责交给你，如果你成长的速度跟不上业务倒退的速度，可能会面临被调整。成长的维度阿里的技术人绝大部分是做业务技术的，即业务和技术要同时倒退，纯技术倒退路线是指中间件、数据库、操作系统、硬件之类的实打实的技术。阿里对业务技术人的要求，既要有技术的深度，又要有业务的高度，此外还须要你有领导力、影响力等软技能，当然心态也是不容忽视的。我的代表作是 MOZI ，2018 年年初开始做 MOZI ，我抉择做 MOZI 的起因是我就要开始站在业务线或者公司层面去思考，MOZI 做了会给业务带来什么扭转。做 MOZI 的时候是站在经济体的的角度在思考问题，另外那个时候经济体的云化产品化才刚刚开始，做出 MOZI 提供一套对立解决方案正逢其时。技术的深度咱们是做业务技术的，业务技术如何做得更加“技术”，这里我学习了很多大牛的文章，尤其是张建飞巨匠对我启发十分大。这里我总结下两点： 1 . 业务复杂度：“基于简单业务场景的形象能力”是一种能体现你技术深度的能力，业务的实质是模型，如果咱们能基于简单业务场景形象出畛域模型或者基于简单业务场景做流程编排，做好分层，不仅反映你对业务认知的深度，也反映了你的技术深度。 2 . 技术复杂度：“针对大用户量或者大数据量的可用性建设”这个是能很好的反映你的技术深度，然而咱们在做这一块的时候要有一些创新性的思考，可用性年年做，然而基于新的业务场景会有什么不一样？比方 MOZI 提供了一个多租户&多账号的能力，那么咱们做限流的时候是不是能够按租户限流，做缓存逐出的时候能够按租户来进行逐出，一种特地的租户咱们能够辨别看待。这些都是咱们要去思考的问题，不能总是吃老本。另外咱们其实都是属于“利用架构”畛域的，张建飞巨匠总结的利用架构的道是：“外围业务逻辑和技术细节拆散”，我感觉十分有情理，咱们应该利用分治的思维，把业务和技术做拆散，从而升高零碎的复杂度。业务的高度马云曾说，咱们既要能活在当下，又要有远大的现实，活在当下是一种求实，让客户先赢。远大的现实是咱们长期倒退的路线，也十分重要，背地体现你的一种“务实”的能力。为什么优良的业务开发人员肯定要有“想法”？如果没有想法，基本上就是产品经理安顿什么，而后就做什么，不会思考将来的倒退，也不能很好的造就你的业务敏锐度，更加不会有前瞻性。什么是前瞻性，就是你思考的货色和业务真正倒退的门路其实是统一的，那么就是有很好前瞻性。如果你思考的货色和业务倒退南辕北辙，那其实不叫前瞻性。另外咱们在做业务的时候，业务积淀是十分重要的。阿里有句土话说，“规模可复制的后果才是好的后果”，你做的货色能不能影响更多的人，就看你的业务积淀如何，如果你做的货色一年后通过几次改版都隐没不见了，那其实没有什么积淀。那么咱们应该如何去做业务布局？留神这里的业务布局不是产品经理的布局，也不是你老板的布局，是你本人的布局。分享两点：一、要联合你以后的业务，不能脱离现状谈布局；二、要去参考你的行业标杆，咱们能够借鉴他人的胜利理念，而后融入到咱们的业务场景外面。首先联合 MOZI 的两块业务，一块是经济体客户，一块是政务客户，另外我参考了 MOZI 的行业龙头来做的布局：软技能咱们的软技能大体分为两局部：一种是影响别人的能力，次要是领导力&影响力；另外一种是强化本人的能力，比方结构化思维，形象能力和构建认知坐标，最终你会具备一眼看穿实质的能力。领导力领导力是一种人人应该具备的能力，然而与你有没有领导力有很大的关系。那么到底什么是领导力，我感觉领导力就是“一种压服并且引领别人达成指标的能力”。领导力的晋升外围就是下面这张图，这个图其实叫做乔哈里视窗，也叫沟通视窗，实质是一种对于沟通的技巧和实践，领导力的外围其实是沟通，通过沟通建设信赖，从而来引领他人一起去达成指标。乔哈里将人际沟通信息划分为四个区，别离是公开象限，隐衷象限，盲点象限和潜能象限。咱们应该一直的从别的象限拿出一点货色而后放到公开象限外面去，让公开象限放大，这样你的领导力就晋升了，比方国家领导人和明星，他们的公开象限就十分大。隐衷象限：隐衷象限就是本人晓得然而别人不晓得，把隐衷象限往公开象限外面移动最重要的形式就是自我揭示。比方你写个人成长经验，或者和共事聊聊你的过来，就是一种很好的自我揭示的形式，让他人更理解你是一个什么样的人，从而建设信赖。盲点象限：盲点象限就是本人不晓得然而别人晓得，把盲点象限往公开象限外面移动最重要的形式是恳请反馈。比方两夫妻吵架，妻子说你这人的嘴特损，就喜爱说人毛病。丈夫说“有吗，我素来没感觉”。前面丈夫去找敌人确认：“我妻子说我嘴特损，专门喜爱说人毛病，有这回事吗？”，敌人说“别把嫂子的话放在心上，大家都曾经习惯了~~~”。哈哈，这里其实就是在吵架这种场景下发现了一个人的盲点象限。比方在分享的时候，咱们要让听分享的人给你反馈，这个时候就能很好的发现分享人的盲点象限，从而晋升你本人。潜能象限：大家都说人的潜能是有限的，咱们应该去开掘他。你们晓得巴菲特最拜服的人是谁吗？他最拜服的是弗吉尼亚的一个老太太，这个老太太在88的时候开始守业，没看错就是88岁，她创立了弗吉尼亚毛毯厂，带人开始织毛毯，他从88岁始终干到104岁逝世，公司做到了几百人的规模，取得和很大的胜利，逝世的时候她仍然是CEO。这个故事其实就很好的阐明，人的潜能是有限的，这个老太太88岁还在一直的学习和实际。那么怎么去从本人的潜能象限外面移动一部分到公开象限呢，最重要的就是一直学习和实际，让你一生成长。阿里其实也有一套领导力的方法论：心力：其实是让大家对这件事件心田统一认同；脑力：是对事件的深度思考；膂力：是引领大家把事件做好，拿到后果。用阿里土话就是“一群有情有义的人一起做一件有价值的事件”。这个事件有没有价值，你要去压服他人，压服完后要引领大家做进去。这个和后面的领导力“一种压服并且引领别人达成指标的能力”，其实是差不多的。影响力影响力蕴含两个维度：一个是你做的产品影响力；另外是你的集体影响力。产品影响力：某大佬曾说，你做的货色影响范畴如果只能影响 1 米和你能影响 100 米，甚至你做的货色能影响 1 公里，意义齐全不同。所以你做进去了货色，要想方法去找资源横向放大你的价值，这个十分重要，比方你能够去写文章，去做分享，去找经营帮你写稿子。我在做 MOZI的时候，我组织了 4 次视频分享，组织大家写了几十篇文章，而后还特意找了 ATA 的经营去帮忙推广 MOZI ，不然 MOZI 可能还是会名不见经传。 ...

关于css3:前端面试每日-31-第584天

明天的知识点 (2020.11.20) —— 第584天 (我也要出题)[html] 应用svg能实现哪些简单的性能？[css] 说说你对css3属性column的了解[js] js函数定义形式有哪些？[软技能] 如果有两个我的项目，要进行代码比拟差别，你该如何操作？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于css3:你可能不知道的Animation动画技巧与细节

作者：阿文原文：https://aotu.io/notes/2020/10... 本篇将着重对animation的应用做个总结。引言在 web 利用中，前端同学在实现动画成果时往往罕用的几种计划： css3 transition / animation - 实现过渡动画setInterval / setTimeout - 通过设置一个间隔时间来一直的扭转图像的地位requestAnimationFrame - 通过一个回调函数来扭转图像地位，由零碎来决定这个回调函数的执行机会，比定时批改的性能更好，不存在失帧景象在大多数需要中，css3 的 transition / animation 都能满足咱们的需要，并且绝对于 js 实现，能够大大晋升咱们的开发效率，升高开发成本。本篇文章将着重对 animation 的应用做个总结，如果你的工作中动画需要较多，置信本篇文章可能让你有所播种： Animation 罕用动画属性Animation 实现不间断播报Animation 实现回弹成果Animation 实现直播点赞成果 ❤️Animation 与 Svg 又会擦出怎么的火花呢？???? Loading 组件进度条组件Animation steps() 使用 ⏰ 实现打字成果绘制帧动画Animation 罕用动画属性介绍完 animation 罕用属性，为了将这些属性更好地了解与使用，上面将手把手实现一些 DEMO 具体讲述 Animation 实现不间断播报实现不间断播报 DEMO 通过批改内容在父元素中的 y 轴的地位来实现播送成果 @keyframes scroll { 0%{ transform: translate(0, 0); } 100%{ transform: translate(0, -$height); } } .ul { animation-name: scroll; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; /\* animation: scroll 5s linear infinite; 动画属性简写 */ } 此处为了保留播送滚动成果的连贯性，避免滚动到最初一帧时没有内容，须要多增加一条反复数据进行填充 ...

关于css3:transform-2D-转换

作用：对元素进行挪动、缩放、转动、拉长或拉伸语法：transform: transform-functions;rotate，元素顺时针旋转给定的角度。容许负值，元素将逆时针旋转translate，元素从其以后地位挪动，依据给定的 left（x 坐标）和 top（y 坐标）地位参数

关于css3:阿里云数据湖解决方案全面满足数据需求帮助企业释放数据价值

简介：基于阿里云对象存储OSS构建的数据湖解决方案，能够全面满足数据的存储、离线剖析、交互查问等各种业务诉求，帮忙企业开释数据的价值 1、行业综述游戏市场需求旺盛，行业景气度继续晋升2020年从天而降的疫情，使全国上下在2—3月处于全面抗疫，严防死守的状态，各行各业都受到了冲击，对国民经济造成了不小的影响。尽管此次疫情对于各行各业产生的影响颇深，然而对于“宅经济”来说，的确一针兴奋剂。据统计，2020年第一季度，国内游戏市场稳中有升，理论营销支出732.03亿元。一季度中国自主研发游戏海内市场营销支出37.81亿美元，环比增长31.19%，同比增长40.56%，持续放弃较高增速。相比今年，往年在8月份刚完结的ChinaJoy，会发现一个高频词浮现，那就是“云游戏”。依据往年早些时候公布的《2020年云游戏产业调查报告》，往年中国云游戏的市场规模将超过10亿元，将来两年每年增长率超过100%，接下来的3到5年将是中国云游戏的疾速成长期。 2、行业倒退方向换皮游戏时代曾经终结，大数据驱动智能化精准经营随着国内游戏行业的迅速倒退，游戏画面更加精良，游戏引擎也更加实在，玩家对于游戏内容品质要求越来越高，且游戏厂商泛滥，游戏迭代速度放慢，玩家留存率大大降低。流量称王的时代终结，单纯靠流量导流的形式获取客户的行为收益极低。因而“换皮游戏”逐步被这个时代所摈弃，游戏厂商要想在行业立足，在提供画面更优质、内容更丰盛、游戏性更强的游戏同时，还须要依附大数据分析，解决玩家个性化的需要以及进行更加精准的营销。在解决完画面、内容以及游戏性等“硬件要求”后，越来越多的企业曾经开始意识到须要把游戏数据进行更加精细化的经营剖析，依据用户的沉闷数据、充值数据、偏好数据等为用户推送不同的流动以及玩法。同时还会依据用户的战绩数据、玩耍时长等为不同的用户提供不同的匹配逻辑与关卡难度。置信大家在玩耍MOBA类游戏时会发现，个别在连胜后，就会遭逢连败，输到本人狐疑人生。然而连败后又往往会迎接一波连胜，如此循环，最初将胜率稳固在50%高低。可能这一把匹配到的队友超强，“全场带飞”，下一把的队友就可能是个“萌新小可爱”，蹦蹦跳跳地进入敌方进攻塔范畴送人头。这其实就是使用大数据驱动的一种形式，通过综合剖析游戏玩家每把游戏体现来为玩家匹配不同的队友，最终让大部分玩家的胜率放弃在50%高低，防止玩家因为连胜或者连败对该款游戏失去趣味，大大加强了玩家的整体游戏体验，加强玩家的留存率，刺激更多的玩家为晋升本人的实力进行生产。面临的痛点大数据驱动下数据存储成难题，资源节约成难题尽管在大数据的驱动下，能够准确地对相干用户进行营销，然而在大数据系统构建的时候，很多企业又遇到各种各样的技术挑战。比方，一份数据存储在在生产存储上，须要通过RAID或者多正本的形式进行冗余存储。这个时候咱们要做大数据分析，须要把这些数据进行抽取、ETL解决，来复制到像Hadoop、HDFS存储上。然而通常状况下HDFS须要做三正本，因而一份数据通常须要拷贝5，6份以上，占用了大量的存储空间。随着前期数据量的一直增长，扩容也逐步成为了一个头疼的问题，像Hadoop原生的这种计算、存储交融的架构，如果须要进行扩容，就必须购买原来同规格服务器，极易造成计算、存储资源的节约。更让人头疼的是，多个业务零碎的数据往往是孤立的竖井状的，各个数据处理、剖析零碎不兼容，不能用一套大数据平台进行对立的数据存储、剖析，治理复杂度极高。数据湖解决方案**阿里云数据湖解决方案，助力企业真正开释数据价值**基于阿里云对象存储OSS构建的数据湖解决方案，能够全面满足数据的存储、离线剖析、交互查问等各种业务诉求，帮忙解决下面提到的这些难题。首先，数据湖解决方案可为用户存储的数据提供高达12个9的可靠性，让数据安全寄存，保障用户数据不丢不坏。其次，阿里云的数据湖解决方案，也是一套非常智能的解决方案。其中对象存储OSS，能够对接个多业务零碎，存储来自不同业务零碎的多种数据源，如些零碎的原始数据、游戏日志数据等。等数据汇聚到数据湖之后，它的下层零碎能够兼容多种计算引擎，如开源大数据引擎像Hadoop，Spark，阿里云EMR、DLA等，帮忙用户便捷地实现数据处理和剖析，不须要再反复拷贝多份。同时采纳 Jindofs提供缓存减速计划，还能够取得比应用HDFS更好的体验。同时DLA所提供的双引擎，SQL(兼容Presto)和Spark为用户提供了在计算引擎层面job级别的弹性能力，只须要为每一个job耗费的计算资源付费，而无需搭建集群，Serverless化的计算能力，让用户能够应用SQL&Spark赋能业务，联合OSS的弹性能力，真正意义做到按量付费，降本增效。这样一套整体的数据存储、解决剖析解决方案，能很大水平地缩小零碎兼容性问题，治理保护也更加简略，帮忙IT人员从简单且繁琐的运维中解放出来，更加专一在产品翻新和业务模式的经营上。最佳案例实际客户介绍国内顶级游戏公司，出海手游TOP10，波及的游戏类型包含休闲类游戏、卡牌类游戏、回合类游戏等。业务痛点：出海经验了最后的跑马圈地阶段，中国厂商对出海器重水平来到了更高级别。游戏比拼的聚焦在精细化经营下面，精细化经营作为出海的必备技能如何晋升经营效率，如何实时渠道和流量剖析，ROI剖析，如何智能化晋升玩家活跃度，用户行为剖析进步游戏体验。经常会碰到上面这些问题： 1.须要解决海量并且日益增长的日志数据。2.须要提供弹性能力，达到最优的财务均衡。3.数据分析师相熟SQL，经常会有大数据量的多表join。4.须要提供全面的游戏经营指标剖析性能。5.须要无效剖析渠道成果，使每分钱都花在刀刃上。6.对付费用户追踪剖析，从而更好的反映付费用户在整7.个生命周期的要害行为和价值。8.剖析玩家游戏行为，购买道具改良产品体验，进步游戏收益解决方案：1、利用DLA的弹性计算能力，配合OSS的近乎有限的弹性存储能力，构建弹性数据湖计划，打造最优性价比。2、对数据做分层解决，历史日志数据通过SLS投递到OSS，实时日志存入AnalyticDB。3、利用DLA对数据做汇聚和ETL解决，并将统计后果放在AnalyticDB上存储。业务价值：1、玩家链路实时监控，进步游戏体验，达到千万DAU2、用户精细化实时经营，T+1->实时，客户留存率晋升30%3、实时渠道统计，节俭约200万/月广告老本分享：原文链接本文为阿里云原创内容，未经容许不得转载。

关于css3:animation动画

作用：css3动画属性语法animation: name duration timing-function delay iteration-count direction fill-mode play-state;默认：none 0 ease 0 1 normal搭配 @keyframes animation-name{}应用 animation-name，规定须要绑定到选择器的 keyframe 名称animation-duration，规定实现动画所破费的工夫，以秒或毫秒计animation-timing-function，规定动画的速度曲线animation-delay：规定在动画开始之前的提早animation-iteration-count，规定动画应该播放的次数animation-direction，规定是否应该轮流反向播放动画实例：动画与设定实现工夫语法animation-name: keyframename | none;animation-duration: time;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画与设定实现工夫<h1> <div></div></body>实例：动画开始工夫（提早开始工夫）语法animation-delay: time;留神：容许负值，-2s 使动画马上开始，但跳过 2 秒进入动画周期<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画开始工夫 */ animation-delay: 2s; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画开始工夫（提早开始工夫）<h1> <div></div></body>实例：动画播放次数语法animation-iteration-count: n | infinite;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画播放次数 */ animation-iteration-count: 2; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画播放次数<h1> <div></div></body>实例：动画播放次数语法animation-iteration-count: n | infinite;<style> div { width: 100px; height: 100px; background-color: red; position: relative; /* 动画名称 */ animation-name: mymove; /* 动画实现工夫 */ animation-duration: 5s; /* 动画播放次数 */ animation-iteration-count: 2; } @keyframes mymove { from { left: 0; } to { left: 200px; } }</style><body> <h1>实现动画播放次数<h1> <div></div></body>

关于css3:小红书推荐大数据在阿里云上的实践

简介：本篇内容次要分三个局部，在第一局部讲一下实时计算在举荐业务中的应用场景。第二局部讲一下小红书是怎么应用Flink的一些新的性能。第三局部次要是讲一些OLAP的实时剖析的场景，以及和阿里云MC-Hologres的单干。作者：小红书举荐工程负责人郭一小红书举荐业务架构首先这个图上画了一些比拟典型的举荐业务，应用大数据的次要模块，其中最右边是线上举荐引擎，个别举荐引擎会分成召回、排序、后排等几步，在这里就不细说了。次要是从大数据的角度来说，举荐引擎次要是使用预测模型来预估用户对每个候选笔记的喜爱水平。依据肯定的策略来决定给用户举荐哪些笔记。举荐模型在使用时须要抓取笔记特色，这些特色又会回流到咱们的训练数据中，来训练新的模型。举荐引擎返回笔记之后，用户对笔记的消费行为，包含展现、点击、点赞等行为，会造成用户的行为流。这些用户行为流联合了特色流，从而产生了模型训练的数据来迭代模型。联合用户和笔记的信息之后，就会产生用户和笔记画像和举荐业务所用到的一些剖析报表。通过一年多的革新，小红书在举荐场景中，除了从剖析数据到策略这一块，须要人为参加迭代策略之外，其余的模块的更新基本上是做到了实时或近实时的进行。举荐业务的实时计算利用这里略微开展讲一下特色和用户行为的数据回流之后的实时计算，以及咱们怎么应用他们产生的数据。在举荐引擎产生特色流的时候，特色流因为量特地大，包含了所有举荐返回的笔记，大略有近百篇，以及这些笔记的所有特色，所以这些特色总共大略有大几百个。目前咱们的做法是把特色写到一个咱们自研的高效的kv中缓存几个小时，而后用户行为数据是从客户端打点回流，而后咱们就开始了数据流的解决。咱们第一步是把客户端打点的用户行为进行归因和汇总。这里讲一下什么是归因和汇总。因为在小红书的APP下面，客户端的打点是分页面的，比如说用户在首页举荐中看了笔记并进行了点击，点击之后用户就会跳转到笔记页，而后用户在笔记页上浏览这篇笔记并进行点赞。同时用户可能会点击作者的头像进入作者的集体页，并在集体页中关注了作者。归因是指把这一系列的用户行为都要算作首页举荐产生的行为，而不会和其余的业务混起来。因为搜寻用户，在搜寻中看到同样一篇笔记，也可能返回同样的后果。所以咱们要辨别用户的行为到底是由哪一个业务所产生的，这个是归因。而后汇总指的是用户的这一系列行为，对于同一篇笔记，咱们会产生一条汇总的记录，汇总的记录能够便于后续的剖析。而后归因之后，会有一个实时的单条用户行为的数据流。而汇总这边，因为有一个窗口期，所以汇总的数据个别会提早目前大略是20分钟左右。当咱们产生归因和汇总的数据流之后，咱们就会补充上一些维表的数据，咱们会依据用户笔记来找过后咱们举荐产生的特色，同时咱们也会把一些用户的根底信息和笔记的根底信息加到数据流上。这外面其实次要有4个比拟重要的用户场景，第一个场景是产生分业务的Breakdown的信息，这个次要是能晓得某一个用户在不同的笔记维度，他的点击率和一些其余的业务指标，同时我也能够晓得某一篇笔记针对不同的用户，它产生的点击率，这个是咱们在实时举荐当中一个比拟重要的特色。另外一个很重要的是咱们实时剖析的一个宽表，宽表是咱们把用户的信息、笔记信息和用户笔记交互的汇总信息，都变成了一个多维度的表，进行实时剖析，这个前面会更加具体的和大家讲述。而后还有两个比拟重要的，一个是实时训练的信息，训练的信息就是我把用户和笔记交互的信息裁减了，过后排序的时候抓起的特色，这特色加上一些咱们汇总进去的标签，就给模型进行训练来更新模型。而后另外一个就是我所有的汇总信息都会进入离线数据数仓，而后会进行后续的一些剖析和报表的解决。流计算优化—Flink批流一体而后我这里讲一下咱们怎么使用Flink的一些新性能来优化流计算的过程。这外面我次要讲两点，其中第一点就是批流一体化。方才说了咱们把一个用户的行为依据笔记的行为汇总之后进行剖析，这里的汇总的信息其实很多的，汇总信息当中，除了最简略的，比如说用户有没有点赞珍藏这篇笔记，其实还有一些比较复杂的标签，比如说用户在笔记页上停留了多长时间，或者是说这篇笔记之前的点击是不是一个无效点击，咱们对于某些广告场景或者有些场景上面，咱们须要晓得如果用户点击之后停留了比如说超过5秒，那么这个点击是无效的。那么像这种简单的逻辑，咱们心愿在咱们的零碎当中只被实现一次，就能够同时使用在实时和批的计算当中。那么在传统意义上这点是很难的，因为大多数的实现中，批和流是两个版本，就是咱们在Flink下面，比如说实现了一个版本的无效点击的定义，咱们同时也会须要实现一个离线版本的无效点击的定义，这个可能是一个SQL写的版本。那么小红书是使用了FLIP-27外面的一个新的性能，日志文件是一个批的模式，它能够转换成一个流的模式，这样的话我就能够做到代码意义上的批流对立。流计算优化—Multi-sink Optimization 那么还有一个Flink的性能就是一个在Flink 1.11上的Multi-sink Optimization。它的意思是我一份数据会写到多个数据利用下来，比方我会同时须要做张用户行为的宽表，同时也生成一份离线的数据。那么Multi-sink Optimization做的是，你只须要从Kafka外面读一次，如果是同一个key的话，他只须要去Lookup一次kv就能够产生多份数据，同时写到多个sink，这样能够大大减少咱们对Kafka的压力和对 kv查问的压力。小红书OLAP典型场景最初我讲一下咱们的OLAP场景和阿里云MaxCompute、Hologres的一个单干。小红书在举荐业务上面有很多OLAP场景，这里我讲4个比拟常见的场景利用，最常见的其实就是依据用户的实验组分组进行比拟的一个实时剖析。因为咱们在举荐业务下面须要大量的调整策略或者是更新模型，而后每次调整策略和更新模型咱们都会开一个试验，把用户放到不同的ABtest外面来比拟用户的行为。那么一个用户其实在举荐当中会同时处于多个试验，在每一个试验外面是属于一个实验组，咱们按试验分组做的试验剖析，次要就是把一个试验拿进去，而后把用户的行为和汇总数据，依据这个试验当中的实验组进行分维度的剖析，看看不同的实验组它的用户指标有什么差异。而后这个场景是一个十分常见的场景，然而也是计算量十分大的场景，因为它须要依据用户的试验tag进行分组。而后另外一个场景就是咱们小红书的举荐其实是跑在了多个数据中心下面，不同的数据中心常常有一些变动，比如说是运维的变动，咱们要起一个新的服务，或者是咱们可能有些新的模型须要在某个计算中心先上线，那么咱们须要一个端到端的计划去验证不同的数据中心之间的数据是不是统一，用户在不同数据中心的体验是不是一样。这个时候就须要咱们依据不同的数据中心进行比拟，比拟用户在不同的数据中心当中产生的行为，他们最终的指标是不是统一，同样咱们也用到了咱们的模型和代码的公布当中。咱们会看一个模型公布或者一份代码公布的老版本和新版本，他们产生的用户的行为的指标比照，看他们是不是统一。同样咱们的OLAP还用在了实时业务指标的告警，如果用户的点击率和用户的点赞数忽然有一个大幅的降落，也会触发咱们的实时的告警。小红书OLAP数据的规模在顶峰时候咱们大略每秒钟有35万条用户行为被记入咱们的实时计算当中。而后咱们大宽表大略有300个字段，而后咱们心愿可能放弃两周多大略15天左右的数据，因为咱们在做试验剖析的时候，常常须要看本周和上一周的数据的比照，而后咱们大略每天有近千次的查问。小红书+Hologres咱们在7月和阿里云的MaxComputer和Hologres进行了一个单干。Hologres其实是新一代的智能数仓的解决方案，它可能把实时和离线的计算都通过一站式的办法来解决。同时它的利用次要能够用在实时大屏、Tableau和数据迷信当中，咱们钻研下来是比拟适宜咱们的举荐场景的。小红书Hologres利用场景Hologres做的事件次要是对离线的数据进行了查问和减速，而后对离线的数据做表级别的交互查问响应，他就无须再做从离线把数据搬到实时数仓的这么一个工作，因为它都在外面了。整个实时数仓，它是通过搭建用户洞察体系，实时监控平台的用户数据，能够从不同的角度对用户进行实时诊断，这样能够帮忙施行精细化的经营。这个其实对于咱们用户大宽表来说也是一个非常适合的场景。而后它的实时离线的联邦计算能够基于实时计算引擎和离线数仓MaxCompute交互剖析，实时离线联邦查问，构筑全链路精细化经营。 Hologres VS Clickhouse 在和阿里云MaxCompute单干之前，咱们是自建了Clickhouse的集群，过后咱们也是一个很大规模的集群，一共用了1320个core，因为Clickhouse它不是一个计算存储拆散的计划，所以过后咱们为了节约老本，只寄存了7天的数据，而后因为Clickhouse对于用户试验tag这个场景其实没有很好的优化，所以说咱们过后查问超过三天的数据就会特地慢。因为是个OLAP场景，咱们心愿每次用户的查问能在两分钟之内出后果，所以是限度了咱们只能查过来三天的数据。同时另外还有一个问题就是Clickhouse对于组件的反对是有些问题的，所以咱们没有在Clickhouse集群下面配置组件，如果上游的数据流有些抖动，数据造成一些反复的状况下，上游的Clickhouse外面其实会有一些反复的数据。同时咱们也是派了专人去运维Clickhouse，而后咱们通过调研发现，Clickhouse如果你要做成集群版的话，它的运维老本还是很高的。所以咱们在7月份的时候和阿里云单干，把咱们举荐的一个最大的用户宽表迁徙到了MaxCompute和Hologres下面，而后咱们在Hologres下面一共是1200个core，因为它是计算存储的计划，所以1200个core就足够咱们应用了。然而咱们在存储的方面是有更大的需要的，咱们一共存了15天的数据，而后因为Hologres对于用户依据试验分组这个场景是做了一些比拟定制化的优化，所以说咱们当初能够轻松地查问7天到15天的数据，在这个依据实验组分组的场景上面，其查问的性能与Clickhouse相比是有大幅晋升的。Hologres它其实也反对Primary Key，所以咱们也是配置了Primary Key，咱们在这个场景上面是用了insert or ignore这个办法，而后因为配置了Primary Key，它就人造具备去重的性能，这样的话咱们上游只有保障at least once，上游的数据就不会有反复。而后因为咱们是放在阿里云下面，所以说是没有任何的运维的老本。原文链接本文为阿里云原创内容，未经容许不得转载。

关于css3:CSS实现两个元素相融效果粘滞效果

记得前几年手机版淘宝左下角有个狠有意思的圆形按钮，点击后会呈现几个小按钮，并且出场动画很有意思，前面才晓得这种成果叫“粘滞”成果，如图：那这种成果到底用了什么属性呢？答案是次要用了filter:blur()属性，及filter:contrast()属性配合 <style> body{ margin: 0; padding: 0; } .box{ position: relative; width: 500px; height: 500px; filter: contrast(20); /* 背景色肯定要为实底色，否则两个元素边缘会有含糊成果 */ background-color: #fff; } .circle-big{ position: absolute; top: 20px; left: 100px; width: 100px; height: 100px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toRight 3s ease-out infinite; background-color: #333; } .circle-small{ position: absolute; top: 35px; left: 220px; width: 60px; height: 60px; border-radius: 50%; filter: blur(6px); box-sizing: border-box; animation: toLeft 3s ease-out infinite; background-color: #FFFC00; } @keyframes toRight{ 50%{ left: 150px; } } @keyframes toLeft{ 50%{ left: 150px; } }</style><div class="box"> <div class="circle-big"></div> <div class="circle-small"></div></div>最终成果如图： ...

关于css3:mPaaSRPC-拦截器各种场景下的使用指南

简介： RPC拦截器机制在preHandle、postHandle、exceptionHandle以及H5等场景中的利用 mPaaS 挪动网关服务（Mobile Gateway Service，简称 MGS）作为 mPaas 最重要的组件之一，连贯了挪动客户端与服务端，简化了挪动端与服务端的数据协定和通信协定，从而可能显著晋升开发效率和网络通讯效率。在咱们日常运维过程中发现，很多用户在应用客户端RPC组件的时候，有很多不同场景的诉求，比方拦挡申请增加业务申请标记，免登，返回后果模仿，异样解决，限流等。本文旨在介绍通过利用RPC提供的拦截器机制，通过不同理论场景的形容，供业务参考应用。 RPC调用原理当 App 在挪动网关控制台接入后盾服务后，调用RPC的示例代码如下： RpcDemoClient client = MPRpc.getRpcProxy(RpcDemoClient.class);_// 设置申请_GetIdGetReq req = new GetIdGetReq();req.id = "123";req.age = 14;req.isMale = true;_// 发动 rpc 申请_String response = client.getIdGet(req);值得好奇的是，整个调用过程中其实咱们并没有去实现 RpcDemoClient 这个接口，而是通过 MPRpc.getRpcProxy 获取了一个代理，通过代理对象实现了调用。在这里其实次要应用了 Java 动静代理的技术。如下图所示，当调用RPC接口的时候，会通过动静代理的RpcInvocationHandler，回调其实现的invoke办法，最终在invoke内实现数据的序列化解决最初通过网络库发到服务端。 public <T> T getRpcProxy(Class<T> clazz) { LogCatUtil.info("RpcFactory", "clazz=[" + clazz.getName() + "]"); return Proxy.newProxyInstance(clazz.getClassLoader(), new Class[]{clazz}, new RpcInvocationHandler(this.mConfig, clazz, this.mRpcInvoker)); }在业务开发中，如果在某些状况下须要管制客户端的网络申请（拦挡网络申请，禁止拜访某些接口，或者限流），能够通过 RPC 拦截器实现。 ...

关于css3:CSS选择器优先级

！important　在属性前面写上这条款式，会笼罩掉页面上任何地位定义的元素的款式。 2. 行内款式，在style属性外面写的款式。 3. id选择器 4. class选择器 5. 标签选择器 6. 通配符选择器* 7. 浏览器的自定义属性和继承

关于css3:css3入门

一、在html中如何引入css在style属性中间接填写css款式（行内款式、内联式）填写到<style></style>标签中（内嵌式）将css代码写入.css文件，在html文件中引入该文件（内部款式），与内嵌式优先级相当。链接式<link>属于html标签，加载html的同时加载.css文件导入式@import 是css提供的，在html加载实现后再加载.css文件二、.选择器2.1外围选择器标签选择器 h1{} 类选择器 .class{} id选择器#id {} 组合选择器 div.one,div.two{} 并且选择器 ul.nav{} 广泛选择器 *{} 2.2档次选择器父子选择器：.nav > li {} 后辈选择器 .nav li{} 下一个兄弟选择器： div.b_first + div.b_second{} 之后所有兄弟选择器： div.b_first ~ div.b_second{} 2.3伪类选择器:first-child:last-child:nth-child（参数）参数：数字、表达式（n+3，从n=0开始）、关键字（odd、even） :hover2.4伪元素选择器ul::after{ clear:"both"; content:""; display:"block" } 2.5属性选择器[name] 抉择具备name属性的元素[name=username] 抉择具备name属性，并且属性值为username的元素[name^=u] 抉择具备name属性，并且属性值以u结尾的元素[name$=u] 抉择具备name属性，并且属性值以u结尾的元素[name*=u] 抉择具备name属性，并且属性值中蕴含u的元素三、优先级特权 !important 权值 1000 style属性 100 #id 10 .class、伪类、属性 1 标签（元素）、伪元素程序四、盒子模型(针对于块元素探讨盒子模型) 4.1款式外边距 margin-top、margin-right、margin-bottom、margin-left margin:0 auto（盒子居中，前提是曾经设置width值）内边距 padding(-top/-right/-bottom/-left) 边框 border(-top/-right/-bottom/-left) borde（速写模式): border-widthborder-style :soliddotteddasheddouble border-color（上下左右、上右左下、高低右左) ...

关于css3:css多列瀑布流布局

一、效果图二、代码<!DOCTYPE html><html><head><style> /* https://www.cnblogs.com/bbc66/p/9434217.html */ html,body{ padding: 0;margin: 0; } .box { padding: 10px; /* display: flex; flex-flow:column wrap; */ /* height: 100vh; */ column-count:2; /*指定列宽*/ /* column-width:500px; */ /*指定列与列之间的间距*/ column-gap: 10px; /*指定列与列之间间隙的款式*/ /*column-rule:2px dotted red*/ /*绝对应上面的三个属性*/ /* column-rule-color:red; column-rule-style:dotted; column-rule-width:2px; */ } .item { /* margin: 10px; */ margin-bottom: 10px; /* width: calc(100%/3 - 20px); */ height:300px; } .item img{ width: 100%; height:100%; background: pink; }</style></head><body> <div class="box"> <div class="item" style="height: 200px;"> <img src="banner.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item" style="height: 120px;"> <img src="cloth.jpg" alt="" /> </div> <div class="item" style="height: 500px;"> <img src="banner.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="banner.jpg" alt="" /> </div> <div class="item" style="height: 100px;"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="show.jpg" alt="" /> </div> <div class="item"> <img src="cloth.jpg" alt="" /> </div> <div class="item"> <img src="banner.jpg" alt="" /> </div> </div></body>

关于css3:分布式锁在存储系统中的技术实践

简介：阿里云存储提供了残缺的分布式锁解决方案，通过了阿里云泛滥云产品贵重的业务场景中长期锻炼，稳固高牢靠，且提供了多种语言的SDK抉择，甚至是RESTful集成计划。 1 背景针对共享资源的互斥拜访从来是很多业务零碎须要解决的问题。在分布式系统中，通常会采纳分布式锁这一通用型解决方案。本文将就分布式锁的实现原理、技术选型以及阿里云存储的具体实际进行阐述。图1 锁 2 从单机锁到分布式锁在单机环境中，当共享资源本身无奈提供互斥能力的时候，为了避免多线程/多过程对共享资源的同时读写访问造成的数据毁坏，就须要一个第三方提供的互斥的能力，这里往往是内核或者提供互斥能力的类库，如下图所示，过程首先从内核/类库获取一把互斥锁，拿到锁的过程就能够排他性的访问共享资源。演变到分布式环境，咱们就须要一个提供同样性能的分布式服务，不同的机器通过该服务获取一把锁，获取到锁的机器就能够排他性的访问共享资源，这样的服务咱们统称为分布式锁服务，锁也就叫分布式锁。图2 单机锁到分布式锁由此形象一下分布式锁的概念，首先分布式锁须要是一个资源，这个资源可能提供并发管制，并输入一个排他性的状态，也就是：锁 = 资源 + 并发管制 + 所有权展现以常见的单机锁为例： Spinlock = BOOL + CAS （乐观锁） Mutex = BOOL + CAS + 告诉（乐观锁） Spinlock和Mutex都是一个Bool资源，通过原子的CAS指令：当当初为0设置为1，胜利的话持有锁，失败的话不持有锁，如果不提供所有权的展现，例如AtomicInteger，也是通过资源（Interger）+CAS，然而不会明确的提醒所有权，因而不会被视为一种锁，当然，能够将“所有权展现”这个更多地视为某种服务提供模式的包装。单机环境下，内核具备“上帝视角”，可能晓得过程的存活，当过程挂掉的时候能够将该过程持有的锁资源开释，但倒退到分布式环境，这就变成了一个挑战，为了应答各种机器故障、宕机等，就须要给锁提供了一个新的个性：可用性。如下图所示，任何提供三个个性的服务都能够提供分布式锁的能力，资源能够是文件、KV等，通过创立文件、KV等原子操作，通过创立胜利的后果来表明所有权的归属，同时通过TTL或者会话来保障锁的可用性。图3 分布式锁的个性和实现 3 分布式锁的系统分类依据锁资源自身的安全性，咱们将分布式锁分为两个营垒： A：基于异步复制的分布式系统，例如mysql，tair，redis等； B：基于paxos协定的分布式一致性零碎，例如zookeeper，etcd，consul等；基于异步复制的分布式系统，存在数据失落（丢锁）的危险，不够平安，往往通过TTL的机制承当细粒度的锁服务，该零碎接入简略，实用于对工夫很敏感，冀望设置一个较短的有效期，执行短期工作，丢锁对业务影响绝对可控的服务。基于paxos协定的分布式系统，通过一致性协定保证数据的多正本，数据安全性高，往往通过租约（会话）的机制承当粗粒度的锁服务，该零碎须要肯定的门槛，实用于对安全性很敏感，心愿长期持有锁，不冀望产生丢锁景象的服务。 4 阿里云存储分布式锁阿里云存储在长期的实际过程中，在如何晋升分布式锁应用时的正确性、保障锁的可用性以及晋升锁的切换效率方面积攒比拟多的教训。 4.1 严格互斥性互斥性作为分布式锁最根本的要求，对用户而言就是不能呈现“一锁多占”，那么存储分布式锁是如何防止该状况的呢？答案是，服务端每把锁都和惟一的会话绑定，客户端通过定期发送心跳来保障会话的有效性，也就保障了锁的拥有权。当心跳不能维持时，会话连同关联的锁节点都会被开释，锁节点就能够被从新抢占。这里有一个要害的中央，就是如何保障客户端和服务端的同步，在服务端会话过期的时候，客户端也能感知，如下图所示，在客户端和服务端都保护了会话的有效期的工夫，客户端从心跳发送时刻（S0）开始计时，服务端从收到申请（S1）开始计时，这样就能保障客户端会先于服务端过期。用户在创立锁之后，外围工作线程在进行外围操作之前能够判断是否有足够的有效期，同时咱们不再依赖墙上工夫，而是基于零碎时钟来对工夫进行判断，零碎时钟更加准确，且不会向前或者向后挪动（秒级别误差毫秒级，同时在NTP跳变的场景，最多会批改时钟的速率）。图4 存储场景的应用形式在分布式锁互斥性上，咱们是不是做到完满了？并非如此，还是存在一种状况下业务基于分布式锁服务的拜访互斥会被毁坏。咱们来看上面的例子：如下图9所示，客户端在工夫点S0尝试去抢锁，在工夫点S1在后端抢锁胜利，因而也产生了一个分布式锁的有效期窗口。在有效期内，工夫点S2做了一个拜访存储的操作，很快实现，而后在工夫点S3判断锁的有效期仍旧成立，继续执行拜访存储操作，后果这个操作耗时好久，超过了分布式锁的过期工夫，那么可能这个时候，分布式锁曾经被其余客户端抢占胜利，进而呈现两个客户端同时操作同一批数据的可能性，这种可能性是存在的，尽管概率很小。图6 越界场景针对这个场景，具体的应答计划是在操作数据的时候确保有足够的锁有效期窗口，当然如果业务自身提供回滚机制的话，那么计划就更加齐备，该计划也在存储产品应用分布式锁的过程中被采纳。还有一个更佳的计划，即，存储系统自身引入IO Fence能力。这里就不得不提Martin Kleppmann和redis的作者antirez之间的探讨了，redis为了避免异步复制导致的锁失落的问题，引入redlock，该计划引入了多数派的机制，须要取得多数派的锁，最大水平的保障了可用性和正确性，但依然有两个问题： • 墙上工夫的不牢靠（NTP工夫） • 异构零碎的无奈做到严格正确性墙上工夫能够通过非墙上工夫MonoticTime来解决（redis目前依然依赖墙上工夫），然而异构零碎的只有一个零碎并没有方法保障完全正确，如下图10所示，Client1获取了锁，在操作数据的时候产生了GC，在GC实现时候失落了锁的所有权，造成了数据不统一。 ...

关于css3:CSS水平垂直居中布局方案概述述

在前端开发中，通过CSS实现布局容器的居中，也有诸多办法形式，当然也是CSS面试题中的经典面试题，在本文章中会零碎的剖析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中成果。在传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性来实现根本布局，包含本文章的居中排列。 **你可能须要CSDN网易云课堂教程掘金EDU学院教程知乎Flutter系列文章本文章首发于微信公众号（biglead）我的大前端生涯，同步登载各技术论坛。 1 Flexbox中实现程度垂直居中1.1 Flexible Box 的简述在2009年，W3C提出出的 Flex 布局计划，Flex是Flexible Box的缩写，可意为”弹性布局”，任何一个容器都能够指定为Flex布局，可用来为盒状模型提供最大的灵活性。采纳Flex布局的元素，称为Flex容器（flex container），以下称为 Flexbox ，Flex容器中的所有子元素称为Flex我的项目（flex item）。任何一个容器都能够指定为Flex布局，如下所示： .box{ display: flex;}或者是 .box{ display: inline-flex;}可点击这里查看 CSS中flex和inline-flex的区别 Flexbox 默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做main start，完结地位叫做main end；穿插轴的开始地位叫做cross start，完结地位叫做cross end，如下图所示： 1.2 Flexible Box 中子 Item的居中对齐在Flexbox布局模块中，使其子 Item (flex item) 居中对齐（程度方向与竖直方向全副居中），如下图 1-1 所示成果： 1.2.1 实现形式一只设置 Flex容器的属性如图 1-1 中所示的成果，只须要在Flex容器上设置justify-content、align-items的值为center时，能够让元素在Flex容器中达到程度垂直居中的成果，如下代码清单1-2所示： /*代码清单1-2*/<div class="flex__container"> <div class="flex__item"></div></div> /*Flex 容器*/ .flex__container { display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 100px; height: 100px; background-color: aqua; }justify-content 用来设置程度居中，如下图1-3所示：align-items 用来限度竖直居中，如下图1-4所示： ...

关于css3:实现盒子居中

一、规范流下的盒子程度居中只对块级元素起作用 margin : 0 auto ; 二、相对定位的盒子程度、竖直居中 1.通过具体的计算,让盒子居中 position : absolute ; /* 挪动父元素宽度的一半 */ left : 50% ; top : 50% ; /* 挪动的是元素自身本人的一半 */ margin-left : -60px ; margin-top : -25px ; 2.不必具体计算的居中position : absolute ; left : 0 ; top : 0 ; right : 0 ; bottom : 0 ; 3.2D位移形式实现定位元素居中 position : absolute ; left : 50% ; top : 50% ; ...

关于css3:css3实现灰白间隔斜角背景图

效果图代码background: repeating-linear-gradient(-35deg, #fff 0, #fff 1%, gray 1%, gray 2%);

关于css3:CSS-display的多种写法

CSS display的多种写法本文将介绍如何通过定义display属性创立一个 CSS formatting box display属性值先来看规范文档是怎么形容的吧从大的分类来讲，display能够分为6个大类: display-outside所谓display-outside，就是说这些值只会间接影响一个元素的内部体现，而不影响元素外面的儿子级孙子级元素的体现。 display: block：定义最根本的block-level display: inline：定义最根本的的inline-level display: run-in：会依据前面的元素进行转换display为inline | inlin-block | block。如果它后一个元素是block，那么它会变成inline并且神奇的是它会和后一个元素并排。如果它后一个元素是inline那么它会变成block。不过很遗憾，Chrome从32版本开始将这个属性移除了。想要理解其实现成果，能够参考规范文档 https://www.w3.org/TR/css-dis... 想要理解为什么chrome不反对这个属性，能够浏览 display-run-in-dropped-in-chrome display-insidedisplay-inside 艰深地讲，次要是用来管教本人上司的儿子级元素的排布的，规定它们的布局。 display: flow：处于试验阶段的一个属性值，渲染成哪个盒子与内部元素的显示类型无关。 If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.display: flow-root: 能够让元素块状化，同时蕴含格式化上下文BFC，能够用来革除浮动，去除margin合并，实现两栏自适应布局等。 <div class="box"> <img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832"> <p class="flow-root">zhaodao88.com</p></div><style> img { float: left; width: 50px; margin-right: 10px; } .flow-root { display: flow-root; background-color: #f0f3f9; padding: 10px; }</style> ...

关于css3:CSS-Sprites

CSS Sprites在国内很多人叫css精灵，是一种网页图片利用解决形式。它容许你将一个页面波及到的所有零星图片都蕴含到一张大图中去，这样一来，当拜访该页面时，载入的图片就不会像以前那样一幅一幅地缓缓显示进去了。利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position能够用数字准确的定位出背景图片的地位。长处: (1)利用CSS Sprites能很好地缩小网页的http申请，从而大大的进步页面的性能，这也是CSS Sprites最大的长处，也是其被广泛传播和利用的次要起因； (2)CSS Sprites能缩小图片的字节，如果屡次用3张图片合并成1张图片的字节和这3张图片的字节总和,相比拟,后果总是前者较小. (3)解决了网页设计师在图片命名上的困扰，只需对一张汇合的图片上命名就能够了，不须要对每一个小元素进行命名，从而进步了网页的制作效率。 (4)更换格调不便，只须要在一张或少张图片上批改图片的色彩或款式，整个网页的格调就能够扭转。保护起来更加不便。毛病（1）图片合并麻烦：图片合并时，须要把多张图片有序的正当的合并成一张图片，并留好足够的空间避免版块呈现不必要的背景。（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会呈现背景断裂。（3）图片定位繁琐：开发时须要通过工具测量计算每个背景单元的准确地位。（4）可维护性差：页面背景须要少许改变，可能要批改局部或整张已合并的图片，进而要改变css。在防止改变图片的前提下，又只能（最好）往下追加图片，但这样减少了图片字节。

关于css3:每天一个小技巧CSS-clippath-的妙用

CSS 的 clip-path 属性是 clip 属性的升级版，它们的作用都是对元素进行 “剪裁”，不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形，而 clip-path 更加弱小，能够以任意形态去裁剪元素，且对元素的定位形式没有要求。基于这样的个性，clip-path 罕用于实现一些炫酷的动画成果。比方：视差广告成果：实现请参考：CodePen 菜单栏弹出成果：实现请参考：CodePen Clip Path分类clip-path 有几大类，别离为： basic-shape: 根本图形，包含 inset()、circle()、ellipse()、polygon()clip-source: 通过 url() 办法援用一段 SVG 的 <clipPath> 来作为剪裁门路geometry-box: 独自应用时会将指定框的边缘作为剪裁门路，或者配合 basic-shape 应用，用于定义剪裁的参考框（Reference Box）（因为该属性浏览器反对度比拟低，本文暂不探讨）一、Basic Shape1. Insetinset() 用于定义一个插进的矩形，即被剪裁元素外部的一块矩形区域。参数类型：inset( <shape-arg>{1,4} [round <border-radius>]? )其中 shape-arg 别离为矩形的上右下左顶点到被剪裁元素边缘的间隔（和margin、padding参数相似），border-radius 为可选参数，用于定义 border 的圆角。 DEMO: html: <img class="img inset" src="http://source.unsplash.com/random/1000x1000" />css: .inset { clip-path: inset(0); &:active { clip-path: inset(100px 200px 10% 20% round 20px); }} ...

敲好用的伪类选择器-focuswithin

伪类选择器focus-within，它示意一个元素取得焦点，或，该元素的后辈元素取得焦点。划重点，它或它的后辈取得焦点。这也就意味着，它或它的后辈取得焦点，都能够触发 :focus-within。代码示例： //html<div class="container" tabindex="0"> <label for="text">Enter text</label> <input id="text" type="text" /> </div>//css.container:focus-within { background-color: #aaa; }上面是演示动画：包裹input元素的父元素，在Input被抉择时，款式也产生了扭转：它或它的后辈取得焦点，这一点使得让感知获焦区域变得更大，所以，最惯例的用法就是应用 :focus-within 感应用户操作聚焦区域，高亮揭示。

利用transform实现一个纯CSS弹出菜单

前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，新近的做法是用jQuery的来管制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这所有都变得异样简略先上成果制作方法外围就是利用了transform的区域位移办法，在配合上li标签的hover伪类和动画延时，从而简略实现了子菜单的显示 <nav> <ul> <li> <strong>home</strong> <div> <a href="">cms</a> <a href="">crm</a> </div> </li> <li> <strong>live</strong> <div> <a href="">java</a> <a href="">php</a> </div> </li> <li> <strong>pictrue</strong> <div> <a href="">mm</a> <a href="">dd</a> </div> </li> </ul></nav> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } nav{ margin: 10px; } nav ul { list-style-type: none; height: 32px; display: flex; } nav ul li{ margin-right: 10px; } nav ul li strong{ text-transform: uppercase; background-color: #9b59b6; color: white; padding: 5px 30px; line-height: 30px; cursor: pointer; } nav ul li strong+div{ display: flex; flex-direction: column; background-color: #3498db; padding: 10px; transform: translateY(-110%); opacity: 0; transition: .3s; transform-origin: top; } nav ul li:hover div{ transform: translateY(0); opacity: 1; } nav ul li strong+div a{ color: white; text-decoration: none; text-transform: uppercase; padding: 5px 0; }

css-实现直角三角形

支流浏览器根本都反对 <div class="triangle"></div>.triangle{ height: 200px; width: 200px; background-image: linear-gradient(to bottom right,red 50%, transparent 50%);}

Flex布局中子元素的最终宽度计算

之前有个共事布局时十分喜爱用flex布局，能用flex的他都用flex了，并且他在用flex布局的时候还总喜爱偏门布局，让人很难捉摸到元素的最终宽度，比方： .box{ display: flex; width: 600px; height: 300px;}.box .left { flex: 1 1 0; background: red;}.box .right { flex: 2 2 0; background: blue;}如上布局你能计算的出.left、'.right'两个子元素的高度吗？如果你还不晓得怎么计算，看我这篇文章你就会了。依据 flex-grow(扩张) 计算元素宽度.box{ display: flex; width: 600px; height: 300px;}.box .left { flex: 1 1 200px; background: red;}.box .right { flex: 2 1 300px; background: blue;}依据flex-grow计算元素宽度首先须要计算出：残余空间、扩张比总和残余空间：600 - (200 + 300) = 100扩张比总和：1 + 2 = 3每份扩张所占宽度：100 / 3 ≈ 33.33 因而两个子元素的宽度为：.left：300 + (1 * 33.33) = 333.33.right：200 + (2 * 33.33) = 266.67 ...

pointerevents-none的效果

整理自gitHub笔记：CSS3：pointer-events: none;的效果一、背景项目中要实现长按图片触发分享弹窗的功能，测试的时候发现长按图片会触发系统的弹窗（保存图片，分享图片等）。如何禁止系统的行为呢？bing了一下发现pointer-events: none;可以解决问题。二、细说pointer-events: none;2.1 语法pointer-events: none;表示元素不会对mouse/touch相关事件作出响应。 2.2 pointer-events: none;的效果1. 不会触发鼠标相关的事件，以及相关的hover效果clicktouchStarttouchMovetouchEndmouseMovemouseOvermouseLeavedrag相关事件2. 不影响事件冒泡、捕获，只是影响事件处理阶段inner元素被pointer-events: none;。点击inner元素虽然其不触发点击事件，但是其父元素outer会触发点击事件。 3. 穿透效果Front元素被pointer-events: none;。点击Front元素虽然其不触发点击事件，但是其Z轴底部的元素Backend会触发点击事件。也不影响Z轴底部的文本选择。穿透效果应用场景：日期选择组件的渐变效果上下两端的渐变效果一般使用伪元素覆盖上面，为了不影响滑动选择日期，可以给伪元素添加pointer-events: none;。4. 移动端禁止长按图片的系统弹窗5. 应用在a标签上可以禁止hover效果，跳转。参考CSS-TRICKS pointer-eventsCSS3 pointer-events:none应用举例及扩展

前端面试每日-31-第442天

今天的知识点 (2020.07.01) —— 第442天 (我也要出题)[html] 开发静态页面时，不依赖node相关的工具，如何提取出公共部分并引入？[css] 使用css3画个旋转的立方体[js] 一道变态题 Number.call.call(Number, undefined, 0) 等于什么？[软技能] 你喜欢在大城市工作还是小城市？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！欢迎在 Issues 和朋友们一同讨论学习！项目地址：前端面试每日3+1【推荐】欢迎跟 jsliang 一起折腾前端，系统整理前端知识，目前正在折腾 LeetCode，打算打通算法与数据结构的任督二脉。GitHub 地址微信公众号欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个Star, 同时欢迎微信扫码关注前端剑解公众号，并加入 “前端学习每日3+1” 微信群相互交流（点击公众号的菜单：进群交流）。学习不打烊，充电加油只为遇到更好的自己，365天无节假日，每天早上5点纯手工发布面试题（死磕自己，愉悦大家）。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花20分钟来学习与思考。在这千变万化，类库层出不穷的前端，建议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢迎大家到Issues交流，鼓励PR，感谢Star，大家有啥好的建议可以加我微信一起交流讨论！希望大家每日去学习与思考，这才达到来这里的目的！！！（不要为了谁而来，要为自己而来！）交流讨论欢迎大家前来讨论，如果觉得对你的学习有一定的帮助，欢迎点个[Star]

一文汇总-CSS-两列布局和三列布局

前言随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。两列布局左列定宽，右列自适应 float + margin 布局html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>css 代码： #left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { margin-left: 200px; /* 大于或等于左列的宽度 */ height: 400px; background-color: lightgreen;}float + overflow 布局html 代码 <body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>css 代码 #left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { overflow: hidden; height: 400px; background-color: lightgreen;}绝对定位布局html 代码： ...

用CSS绘制我的世界暮色森林中的遗迹石方块纹理

原文地址：https://segmentfault.com/a/1190000022984416作者：Fw恶龙本文首发于：思否前言：在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化（如：平移、旋转）得到的，通常的做法是裁剪一块可重复的图片，设置为背景图即可，随着CSS3的普及，linear-gradient和radial-gradient属性已经得到了较好的支持，通过这两个属性可以很好的模拟许多背景纹理，如：条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代图片的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理，当时打牛头人时一直觉得这个纹理很好看（下图），于是尝试下用CSS来绘制这个纹理。一、分析纹理可以发现这个纹理的最小单元是下图，通过旋转三次可以得到一个地砖纹理。二、绘制纹理单元如果细分的话其实可以把这个单元继续拆分一半，旋转180度也可以得到目前的最小单元，就不搞这么复杂了。目前的最小单元是8*8的单元格，先考虑绘制第一行。 <div class="item"></div>由于定位图片地址有较多计算，以下用到stylus预处理器，也方便纹理颜色调整。 bp($w) $s = '' for i in (1..8) if(i != 8) $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ',' else $s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) return unquote($s) .item $c1 = #738073 background-color $c1 $c2 = #747475 $w = 100px width $w height $w background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%) background-size $w 0.125*$w background-position bp($w) background-repeat no-repeat剩下的7行同理可得： ...

日常开发中一些常用的工具

收集了一些工作中常用的工具。如果你有好用的工具或者有意思的工具网站，要留言哦！图片在线图片压缩 | 在线图片压缩生成随机图片移除图片背景开发地图数据在线写代码各种库的在线CDN地址JavaScript API 在线兼容性查询在线工具网站在线短连接生成常用移动设备尺寸CSS在线三角代码生成器 | CSS在线三角代码生成器CSS在线生成渐变色在线编写代码(Vue,React,Angular,TypeScript)在线网站性能分析前端助手FeHelper(浏览器插件)画流程图画图1 | 画图2 | 画图3 | 画图4 | 画图5其他在线生成Logo | 在线生成Logo录制gif图给gif图加文字在线生成Markdown表格在线PDF转换支持多种格式一键下载网站所有图片&在线图片编辑在线图片编辑loading动画 | loading动画CSS制作loading加载动画在线格式转化(支持200+文件格式)在线生成二维码整理了学习资料以及学习视频，送给小伙伴们。公号内回复【学习资料】自行领取。和一些小伙伴们建了一个技术交流群，一起探讨技术、分享技术资料，旨在共同学习进步，如果感兴趣就扫码加入我们吧！

CSS3自定义滚动条样式-webkitscrollbar

windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下CSS3，还真能不用插件实现自定义滚动条的样式，正合我意代码如下： /定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; } /定义滚动条轨道内阴影+圆角/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #FFF; } /定义滑块内阴影+圆角/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #AAA; } 具体含义及其他设置项：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start { /滚动条上半边或左半边/ } ::-webkit-scrollbar-thumb:window-inactive { /当焦点不在当前区域滑块的状态/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /当鼠标在水平滚动条下面的按钮上的状态/ }

CSS-创意

背景本人一直对 CSS 很感兴趣，刚好我们团队有一位擅长CSS的大佬：COCO。于是我找到他，建议做一期关于CSS的分享，于是就有了《CSS创意构想》。分享的内容很棒，里面有很多技巧，有的很实用，有的很华丽。听完之后，我觉得十分受用，就想结合自己的一些理解，再次整理一番，加深印象，二次吸收，所以就有了今天的文章。满满的干货，也分享给大家，希望对大家有所启发。布局平行四边形先抛一个问题，如何实现平行四边形布局效果? transform ？叠加三角形？仅仅实现形状的话，上面两种方式都是可以的。但是，如果图形内部还有文字，需要正常排布，transform 、叠加三角形都不可行。那怎么办呢？答案就是： shape-outside. shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行排版clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域clip-path 语法： { clip-path: circle(50px at 0 100px); clip-path: ellipse(); clip-path: inset(10px 10px 10px 10px); clip-path: polygon(10px 10px, 20px 20px, 30px 30px);}图文混排 Demo:https://codepen.io/Chokcoco/p... CSS Shapes Demo：https://codepen.io/Chokcoco/p... 一个适用的场景：适配 iPhone X刘海头镂空使用阴影，可以非常简单的模拟遮罩效果，并且，圆角也是没有问题的。 box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); ...

Flex布局与缩放比例计算

一、Flex 布局简介Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，也就是说，行内元素也可以设置成Flex 布局。 // 将块级元素div设置为flex布局div { display: flex;}// 将行内元素span设置为flex布局span { display: flex;}采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。二、Flex布局的默认特性默认情况下，容器中的所有子元素都将进行水平排列，类似于强制进行了一个左浮动，所以容器子元素的float和clear属性会失效。同时，容器中的子元素的对齐方式将不受vertical-align控制，即vertical-align也会失效。 <style>#main{ width:800px; height:300px; display:flex; font-size: 20px; background: red;}</style><div id="main"> <div style="background-color:coral;" class="item-1">红色</div> <div style="background-color:lightblue;" class="item-2">蓝色</div> <div style="background-color:lightgreen;" class="item-3">带有更多内容的绿色啊</div></div>① 在没有给容器设置垂直方向对齐方式同时容器子元素也没有设置高度，那么容器子元素的高度是和容器的高度是一样的，如上，容器中所有的子元素的高度都会变为300px。 ② 默认情况下，容器下的子元素的宽度是不会自动放大的，即默认以元素自身的实际宽度显示。如图所示: ③ 默认情况下，容器下的子元素的宽度是可以缩小的，当容器中所有子元素的宽度之和超过了容器的宽度，默认不会换行显示，那么就需要缩小容器子元素的宽度以保证容器能够容纳下所有的子元素。但容器子元素的宽度并不是无限缩小的，即缩小到不能缩小为止。 .item-1 { width: 200px;}.item-2 { width: 8800px;}.item-3 { width: 8800px;}比如上面，item2、item3宽度设置成了8800px，容器中所有子元素的宽度和为17800px，远远超出了容器的宽度800px，所以容器中的所有子元素必须按比例压缩，item1元素的宽度应变为200 - 191.01 = 8.99px，而item1最小被压缩为存放一个字所需要的宽度，即刚好等于字体的大小，即20px，所以item1的宽度将变为20px。 ④ 默认情况下，容器中的子元素可以被压缩到最小为止，但是当压缩到最小后仍然放不下所有的子元素，那么子元素就会被放到容器的外面。⑤ 如果给容器添加一个垂直方向的对齐方式，那么容器中所有子元素的高度将变为实际的高度，不会与容器等高。 #main{ width:800px; height:300px; display:flex; font-size: 20px; background: red; align-items: flex-start;/*添加垂直方向对齐方式*/} ...